CSS3中的flexbox

LoftySoul 发布于2019-08-30 12:54 / 2586人阅读

摘要：中的给布局带来了许多方便。布局主要分为两个部分以外的地方和中的内容不受影响，按正常的方式进行布局。所以，项目之间的间隔比项目与边框的间隔大一倍。若设置该属性为，则此元素在父元素空间不足时仍保持自己的宽度。

css3中的flexbox给布局带来了许多方便。下面我们就简单的讲一讲它的用法以及适用的地方。

flexbox布局主要分为两个部分：

flex-container

flex-item

flex-container以外的地方和flex-item中的内容不受影响，按正常的方式进行布局。

现在让我们分别看一看父容器和子元素的一些属性。

父容器的属性

display: flex | inline-flex
父元素设置flex或者inline-flex属性之后，其所有的直接子元素自动升级为容器成员，子元素的float，position属性失效。

flex-direction: row | row-reverse | column | column-reverse
用来设置flex-item的排列方式，row为默认选项，由容器x轴开始从左往右进行排列，其他三个选型以此类推。

flex-wrap: nowrap | wrap | wrap-reverse
三个值分别代表换行，不换行，不换行且反方向排列。

justify-content: flex-start | flex-end | center | space-between | space-around
该值有5个属性，假设布局从左往右，这五个值分别代表：左对齐，右对齐，居中，两端对齐，项目之间的间隔都相等，每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items: flex-start | flex-end | center | baseline | stretch
指定在y轴上如何对齐

align-content
该属性在有多根轴线的情况下适用？

子元素（flex-item）的属性

order:
该属性可以调整子元素的顺序。数值越小，排列越靠前，默认情况为0。我们可以通过设置顺序较为后面的元素的order属性为-1来将其前置。

flex-grow:
设置通过什么样的方式分割容器剩余部分的空间。
flex-grow默认值为0，不分取任何剩余空间。
若父容器中有三个flex-item，他们的flex-flow值为1，则三者按照1:1:1的比例等分剩余空间；若它们的flex-flow的值分别为1,2,3，则三者分别分取剩余空间的1/6,2/6,3/6.

flex-shrink:
默认值为1，表示该元素会随着父容器空间的不足而缩小自己。若设置该属性为0，则此元素在父元素空间不足时仍保持自己的宽度。

flex-baisis: | auto

flex: flex-flow[,flex-basis]
综合flex-flow, flex-shrink和flex-basis

浏览器的兼容问题：

目前各浏览器的最新版本都实现了flexbox布局，但是兼容浏览器的不同版本仍然是一项巨大的工程啊TT

idc机房托管专线服务 flexbox FlexBox详解 flexbox容器 css3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115158.html

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
我所知道的flex布局 —— 上篇

摘要：布局也经历了一段演变历史。不同于将要出现的网格布局针对目标为大比例布局，弹性盒布局更适用于应用组件和小比例布局。常规布局是基于块和内联流方向，而布局是基于流。前言你还在用display+position+float来进行css布局吗？有没有觉得用传统的这种布局方法来实现特殊布局特别麻烦困难，例如：垂直居中。今天来记录一下自己对flex布局的了解（虽然不算神马新东西了都可以说是旧东西...

andycall 2019-08-30 13:13 评论0 收藏0
CSS基础篇--你知道的display的值有多少？用了多少？

摘要：与属性的值不同，其不为被隐藏的对象保留其物理空间指定对象为内联元素。指定对象作为块元素级的表格。类同于标签指定对象作为表格行组。伸缩盒过渡版本将对象作为弹性伸缩盒显示。伸缩盒最新版本新增属性可能存在描述错误及变更，仅供参考。它的语法如下： display：none | inline | block | list-item | inline-block | table | inline...

wangdai 2019-08-28 18:17 评论0 收藏0