容器元素属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order
该属性是决定元素排列顺序的。数值越小，排列越靠前，默认为0。如果都为0，就按照代码顺序排列。
<style> .box { width: 800px; display: flex; } .box div { width: 200px; } .first { background: red; order: 4; } .second { background: blue; order: 3; } .third { background: yellow; /* order: 2; */ } .four { background: green; } <div class="box"> <div class="first">1</div> <div class="second">2</div> <div class="third">3</div> <div class="four">4</div> </div>
网络异常，图片无法展示
|
flex-grow
当容器宽度大于容器元素总宽度时，规定容器元素的放大比例。默认为0，即如果存在剩余空间，也不放大。注意：当容器设为flex-wrap: nowrap;不换行的时候，容器宽度有不够分的情况，弹性元素会根据flex-grow来决定。弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效。
<style> .box { width: 800px; display: flex; border: 1px solid black; } .box div { width: 100px; } .first { background: red; /* order: 4; */ flex-grow: 2; } .second { background: blue; /* order: 3; */ flex-grow: 1; } .third { background: yellow; /* order: 2; */ } .four { background: green; } </style> <div class="box"> <div class="first">1</div> <div class="second">2</div> <div class="third">3</div> <div class="four">4</div> </div>
网络异常，图片无法展示
|
网络异常，图片无法展示
|
flex-shrink
定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小。默认情况下等比例收缩。如果值为0，则该元素不缩小。
<style> .box { width: 800px; display: flex; border: 1px solid black; } .box div { width: 250px; } .first { background: red; /* order: 4; */ /* flex-grow: 2; */ flex-shrink: 0; } .second { background: blue; /* order: 3; */ /* flex-grow: 1; */ flex-shrink: 2; } .third { background: yellow; /* order: 2; */ } .four { background: green; } </style> <div class="box"> <div class="first">1</div> <div class="second">2</div> <div class="third">3</div> <div class="four">4</div> </div>
网络异常，图片无法展示
|
flex-basis(个人感觉用处不大)
设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸,即设置flex-grow, flex-shrink后该值将失效。默认值为auto。如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定。当设置为px的数值时，他会覆盖掉元素自身的主轴方向的宽度/高度。
flex-basis: 0 和 flex-basis: auto的区别：
flex-basis: auto表示项目的本来大小，当设置为auto时会根据主轴方向检索该flex-item的width或height值作为flex-basis的值。如果width或height值为auto，则flex-basis设置为content，也就是基于 flex 的元素的内容自动调整大小。
flex-basis: 0相当于指定了宽度或高度（由主轴方向决定）为 0。
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
一些常用缩写表示：
- flex: 1 = flex: 1 1 0% - flex: 2 = flex: 2 1 0% - flex: auto = flex: 1 1 auto - flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
可以取：align-self: auto | flex-start | flex-end | center | baseline | stretch。
默认值为auto，表示继承父元素的align-items属性。
<style> .box { width: 800px; height: 300px; display: flex; border: 1px solid black; align-items: center; } .box div { width: 150px; } .first { background: red; align-self: auto; } .second { background: blue; align-self: stretch; } .third { background: yellow; align-self: baseline; } .four { background: green; align-self: flex-end; } </style> <div class="box"> <div class="first">1</div> <div class="second">2</div> <div class="third">3</div> <div class="four">4</div> </div>
网络异常，图片无法展示
|
flex布局的注意点：
- 如果父元素
flex-wrap: nowrap，即使子元素宽度固定，最后也会被压缩成一行显示。
网络异常，图片无法展示
|
- 设置父元素
display: flex和display: inline-flex的区别。他只是将父元素当场块级元素，还是内联元素。子元素不会受到影响。
- 如果子元素未设置高度，那么父元素
align-items: stretch。子元素将被拉伸，占满父元素的高度。
网络异常，图片无法展示
|
