背景
flexbox布局方式旨在容器中的元素在排版，对其，剩余空间处理的问题上提供一个高效的解决方式，无论子元素的大小是已知或未知，动态或者静态。flexbox布局的思想就是通过改变子元素的长、宽、顺序来更好的利用容器的空间。
而且，相比于规则的布局方式如block，inline，flexbox布局方式对于子元素的排列方向也是任意的。
注意：flexbox布局更加适合于应用组件或者小尺寸的布局，对于大尺寸布局，grid更加适合。
一、flex容器属性
1.1 display属性
定义一个容器为flexbox布局，设置其display为flex即可。
该布局仅仅影响其直接子元素。
该布局仅仅影响其直接子元素。
.container { display: flex; /* or inline-flex */ }注意css3的columns属性对于flex容器是没有效果的。
1.2 flex-direction属性
flexbox布局是属于单方向布局，意思即子元素的排列方向是横向或者纵向。flex-direction的作用就是这只子元素排列方向。flex-direction有四个可选值：row、row-reverse、column、column-reverse.
.container { flex-direction: row | row-reverse | column | column-reverse; }row（默认值）：从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上
1.3 flex-wrap属性
默认的情况下，flex容器会尝试把所有的直接子元素摆放在一排，但是你可以通过设置flex-wrap属性的值来改变这一 布局方式。flex-wrap有四个值：nowrap、wrap、wrap-reverse
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }nowrap：该值为默认值，所有的子元素都在一行
wrap：子元素会自动向下换行
wrap-reverse：子元素会自动向上换行
1.4 flex-row属性
这个属性是flex-direction和flex-wrap的简写。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>1.5 justify-content属性
justify-content属性有五种属性：flex-start、flex-end、center、space-between、space-around、space-evenly，如果flex-direction方向为row，则这五种属性对于子元素的影响如下：
flex-start (默认): 子元素从开始位置挨着排放
flex-end: 子元素紧挨着容器最后摆放
center: 子元素在摆放在容器中间
space-between: 子元素均匀的摆放在容器; 起一个元素在起始位置, 最后一个元素在最末端。
space-around: 子元素均匀的摆在容器中，每个子元素前面的距离都是一样的，但是子元素之间的距离并不是一样，第一个和最后一个到边缘的距离只是为其他两个子元素距离的一半。
space-evenly: 所有的间距都是一样的，包括第一个和最后一个到边缘的距离。
flex-end: 子元素紧挨着容器最后摆放
center: 子元素在摆放在容器中间
space-between: 子元素均匀的摆放在容器; 起一个元素在起始位置, 最后一个元素在最末端。
space-around: 子元素均匀的摆在容器中，每个子元素前面的距离都是一样的，但是子元素之间的距离并不是一样，第一个和最后一个到边缘的距离只是为其他两个子元素距离的一半。
space-evenly: 所有的间距都是一样的，包括第一个和最后一个到边缘的距离。
如果flex-direction属性为column，属性含义相同，对应的是垂直方向布局。
1.6 align-items属性
如果flex-direction方向为row，aign-items属性为元素在垂直方向的布局方式，有五种值：flex-start、flex-end、center、stretch、baseline，这五种值对子元素的影响：
flex-start: 元素垂直方向从上开始摆放
flex-end: 元素垂直方向从下开始摆放
center: 元素垂直方向居中
baseline: 元素垂直方向以第一个元素文本为基准线摆放
stretch (default): 元素垂直方向拉伸填满容器(min-width/max-width仍然有效)
flex-end: 元素垂直方向从下开始摆放
center: 元素垂直方向居中
baseline: 元素垂直方向以第一个元素文本为基准线摆放
stretch (default): 元素垂直方向拉伸填满容器(min-width/max-width仍然有效)
如果flex-direction属性为column，则对应的为水平布局方式。
1.7 align-content属性
这个属性是对多行元素起作用的。例如换行，该元素有五个值，对子元素的影响如下图所示：
flex-start: 顶部对齐
flex-end: 底部对齐
center: 居中对齐
space-between: 均匀对齐，第一个元素在顶部，最后一个元素在底部
space-around: 垂直均匀对齐，每个元素的上下都有相同的间距
stretch (default): 元素垂直拉伸填满容器
flex-end: 底部对齐
center: 居中对齐
space-between: 均匀对齐，第一个元素在顶部，最后一个元素在底部
space-around: 垂直均匀对齐，每个元素的上下都有相同的间距
stretch (default): 元素垂直拉伸填满容器
二 子元素属性
2.1 order属性
默认情况下，flexbox里面的子元素是按照代码的顺序排列的，但是如果给子元素设置了order属性，则会按照oder大小从左往右或者从右往左排序。
具体使用方法：
.item { order: <integer>; /* default is 0 */ }
2.2 flex-grow属性
这个属性可以让子元素在有必要的时候会自动增长。他接受一个没有单位的值作为增长的比例，他表示该子元素应该占用容器剩余空间的多少。
如果所有的子元素flex-grow设置为1，那么容器中剩余的空间会均匀的分配各所有子元素，如果其中一个子元素的flex-grow设置为2，那么flexbox布局将会试着分配给他的空间是其他子元素的两倍。
具体使用方法：
.item { flex-grow: <number>; /* default 0 */ }注意：只是接受非负的数字
2.3 flex-shrink属性
赋予子元素收缩的能力，类似于flex-grow
.item { flex-shrink: <number>; /* default 1 */ }
2.4 flex-basis属性
在分配容器剩余的空间前，定义一个元素默认的尺寸。尺寸的值可以是百分数或者具体的尺寸，也可以是关键字auto，当设置为auto的时候，表示参考我的长和宽（在main-size关键字被弃用之前是参考这个值的）。当设置的关键字是content的时候，表示根据子元素的内容来设置其尺寸，但是这个关键字目前支持的不是很好。
.item { flex-basis: <length> | auto; /* default auto */ }如果值设置为 0, 包含内容的额外的空间不会考虑在内。 如果设为 auto, 额外的空间是一句flex-grow设置的值来分配的。
2.5 flex属性
这个属性是flex-grow、flex-shrink、flex-basis三个属性的简写，第二个和第三个值书可选的。flex默认值为0 1 auto
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }强烈推荐使用这个flex而不是单独设置各个不同的属性。
2.6 align-self属性
作用同align-items，只是这个属性是作用到子元素的，对某个子元素单独设置align属性
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }注意：float，clear、vertical-align对于flex元素没有作用。
bugs：https://github.com/philipwalton/flexbugs
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/233438.html原文链接：https://javaforall.net
