display的flex属性使用详解

小鱼儿 2022-03-20 14:18 717阅读 0赞

flex的兼容性在pc端还算阔以，但是在移动端，那就呵呵了。今天我们只是学习学习，忽略一些不重要的东西。

首先flex的使用需要有一个父容器，父容器中有几个items.

父容器：container

属性：

** display**:flex;/\*flex块级，inline-flex:行内快\*/

** justify-content**:space-around;/\*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配\*/

**align-items**:stretch;/\*center:垂直居中、flex-start：至顶、flex-end:至底、space-between、space-around\*/

** flex-direction**: row;/\*column从上向下的排列，column-reverse、row:从左到右，row-reverse:从右向左\*/

**flex-wrap**:wrap;/\*wrap多行显示（父容器不够显示的时候，从上到下）、nowrap(当容器不够宽的时候，子元素会平分父容器的宽或者高)、wrap-reverse:从下向上\*/

/\*flex-flow是flex-direction、flex-wrap的缩写\*/

这里给出一个简单的demo:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 </td> 
 <td> <code>&lt;!</code><code>doctype</code>&nbsp;<code>html&gt;</code> <code>&lt;</code><code>html</code>&nbsp;<code>lang="en"&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>head</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>meta</code>&nbsp;<code>charset="UTF-8"&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>meta</code>&nbsp;<code>name="Generator" content="EditPlus®"&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;</code><code>style</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.container{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:600px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:400px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid #000;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display:flex;/*flex块级，inline-flex:行内快*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>align-items:stretch;/*center:垂直居中、flex-start,至顶，flex-end:至底*,space-between、space-around*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-direction: row;/*column从上向下的排列，column-reverse,,,,row:从左到右，row-reverse:从右向左*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-wrap:wrap;/*wrap多行显示（父容器不够显示的时候，从上到下）、nowrap(当容器不够宽的时候，子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>/*flex-flow是flex-direction、flex-wrap的缩写*/</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.box{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>　　width:200px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>　 height:100px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid #000;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>style</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>head</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="container"&gt;</code> <code>　　　　&nbsp;&nbsp; &lt;</code><code>div</code>&nbsp;<code>class="box"&gt;这是中间的box1&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>　&lt;</code><code>div</code>&nbsp;<code>class="box"&gt;这是中间的box2&lt;/</code><code>div</code><code>&gt;</code> <code>　　　&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>body</code><code>&gt;</code> <code>&lt;/</code><code>html</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

子元素的属性：

** ****order**：设置元素的顺序

例如：我么想要将本来第二个元素排在第一，将排在第一的元素设置为第二。

我们可以设置他们的order值。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 </td> 
 <td> <code>.box1{order:1;}</code> <code>.box2{order:0;}</code> &nbsp; <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="container"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="box box1"&gt;这是中间的box1&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="box box2"&gt;这是中间的box2&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;　　</code> </td> 
 </tr> 
 </tbody> 
</table>

**flex:指定可伸缩长度的部件**，是flex-shrink,flex-grow,flex-basis这三个属性的缩写。

他可以指定一个子元素的占据父元素的宽度或者高度的比例。（前提是在子元素还没有占满父级元素的情况下）

demo:

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 </td> 
 <td> <code>&lt;</code><code>style</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>.container{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:800px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:600px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid red;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display:flex;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>align-items:center;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>justify-content:center;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-direction:row;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-wrap:wrap;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;</code><code>.box{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:200px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:200px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid blue;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>　　　.box1{ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>　　flex:2</code> <code>&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>&lt;/</code><code>style</code><code>&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="container"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class= " box box1"&gt;1&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="box box2"&gt;2&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="box box3"&gt;3&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="box box4"&gt;4&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code> <code>&lt;/</code><code>body</code><code>&gt;　</code> </td> 
 </tr> 
 </tbody> 
</table>

最终效果如下：因为子元素占满父级元素。

![1137066-20170527130359216-1219454578.png][]

进一步验证：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </td> 
 <td> <code>&lt;</code><code>style</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.container{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:800px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:600px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid red;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display:flex;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>align-items:center;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>justify-content:center;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-direction:row;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-wrap:wrap;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.box{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:200px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:200px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid blue;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>　　　　.box1{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>　　flex:2</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>&lt;/</code><code>style</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>head</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="container"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class= " box box1"&gt;1&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="box box2"&gt;2&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>body</code><code>&gt;　</code> </td> 
 </tr> 
 </tbody> 
</table>

很明显的阔以看到，box1占据了600px宽度

![1137066-20170527130644825-298254609.png][]

**align-self:用来单独设置子元素的对齐方式（可将默认的对齐方式进行覆盖）**

**例如:**我们已经在父元素中设置了align-items:center.(将子元素设置为垂直居中显示)

这个时候我们想单独更改某个子元素的对齐方式，就可以使用align-self

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 </td> 
 <td> <code>&lt;</code><code>style</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.container{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:800px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:600px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid red;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>display:flex;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>align-items:center;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>justify-content:center;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-direction:row;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>flex-wrap:wrap;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>.box{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>width:100px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>height:100px;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>border:1px solid blue;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>　　　　.box1{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>　　flex:2</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>/* .box4{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>align-self:flex-end;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>} */</code> <code>&nbsp;&nbsp;</code><code>&lt;/</code><code>style</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>head</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="container"&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class= " box box1"&gt;1&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="box box2"&gt;2&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="box box3"&gt;3&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>div</code>&nbsp;<code>class="box box4"&gt;4&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/</code><code>div</code><code>&gt;</code> <code>&nbsp;</code><code>&lt;/</code><code>body</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

![1137066-20170527133551232-1756510921.png][]

假如我们设置 box4：align-self:flex-end;呢？？？？？

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>.box4{ </code> <code>　align-self:flex-end;</code> <code>&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

![1137066-20170527133750685-1954245423.png][]

好了，已经改变了box4的对齐方式。

如果想兼容更多的浏览器，可以采用优雅降级的方式，例如sass-flex-mixin

参考：https://juejin.im/entry/5804638e67f3560058c6f914

[1137066-20170527130359216-1219454578.png]: /images/20220320/b6d6b79241df44d68dc5ba202d10a992.png
[1137066-20170527130644825-298254609.png]: /images/20220320/476899d5e1cc417fb10eed12bebfb5db.png
[1137066-20170527133551232-1756510921.png]: /images/20220320/94a78ce8ab964824a5a04dbe4e7cd776.png
[1137066-20170527133750685-1954245423.png]: /images/20220320/0921737ee2774499b4614f65de0fe387.png