flex属性回顾记录

概要：页面布局时用到了flex属性，一些基础用法有些忘记，现在记录一下。

在项目中遇到父元素设置display:flex属性后，再设置justify-content: flex-end属性无效。经排查，是因为子元素设置了flex:1，导致子元素占满了父元素，因此属性没有看出效果。特此回顾下flex的相关基础用法并记录下来。

---

Flexbox 是 flexible box 的简称（注：意思是“灵活的盒子容器”），是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式：

• 在不同方向排列元素；
• 重新排列元素的显示顺序；
• 更改元素的对齐方式；
• 动态地将元素装入容器；

一、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

二、容器属性

容器常用的基本属性有以下几个：

1.flex-direction：row(默认) | row-reverse | column | column-reverse

用于控制项目排列方向与顺序，默认row，即横向排列。

2.flex-wrap：nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行，nowrap表示不换行；wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。

3.flex-flow：是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行。

4.justify-content：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

5.align-items：flex-start | flex-end | center | baseline | stretch(默认)

用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器。flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反。center使用最多，在纵轴中心位置排列。baseline比较特殊，它让项目以第一行文字的基线为参照进行排列。

这里需要注意下：常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

6.align-content：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。flex-start ，center，flex-end 与align-items属性表现一致。space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。

三、项目属性

1.order：用于决定项目排列顺序，数值越小，项目排列越靠前，默认0。

2.flex-grow：用于决定项目在有剩余空间的情况下是否放大，默认为0不放大；注意，即便设置了固定宽度，也会放大。

3.flex-shrink：用于决定项目在空间不足时是否缩小，默认为1，即空间不足时所有项目一起等比缩小；注意，即便设置了固定宽度，也会缩小。但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

4.flex-basis：用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖width属性。

5.flex：flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度，默认0 1 auto。该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

6.align-self：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。用于让个别项目拥有与其它项目不同的对齐方式，可覆盖align-items属性。各值的表现与父容器的align-items属性完全一致。

---

以上，flex布局基本属性介绍完毕了，理解起来还是比较简单的，但是具体如何灵活的去运用，还是要多多去思考，去实践，这样才能更加熟练地掌握flex布局的用法。

 作者：胡元娇

链接：移动云开发者社区移动云开发者社区是一个面向移动云产品技术开发与支持的知识分享交流平台，专注为开发者打造一个有温度的云产品交流社区，移动云开发者社区让您快速上云！https://ecloud.10086.cn/api/query/developer/user/home.html?ticket=ST-72804-tBdwJS0I3UIN7CNEFqSD-cas01.example.org#L2FwaS9xdWVyeS9kZXZlbG9wZXIvYmxvZy9ibG9nZGV0YWlsLmh0bWw/YmxvZ19pZD1lM2I3ODExNDZiYjA0Zjg4YmE4Mzc5OWIyMzIyZDFlYQ==

来源：移动云开发者社区