Flex布局使用（含实例代码）

一、什么是Flex布局？

Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为Flex 布局。

1 2 3

.box{     display:flex; }

　　行内元素也可以使用Flex布局。

1 2 3

.box{     display:inline-flex; }

　　webkit内核的浏览器，必需加上-webkit前缀

1 2 3 4

.box{     display:-webkit-flex;     display:flex; }

　　需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效

二、Flex布局的优势：

可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，可以很安全地使用该项功能。

三、Flex布局相关属性：https://www.jianshu.com/p/5c6f761ff769

四、Flex布局的经典使用：

（1）三列布局（以下帖子方法一）：https://blog.youkuaiyun.com/qq_29918313/article/details/96438212

（2）元素在盒子中平均分布列：https://blog.youkuaiyun.com/qq_29918313/article/details/80262723

五、父元素相关属性：

<div style="display: flex; justify-content: flex-start; width: 500px; height: 100px; border: 1px solid green;">
    <div style="width: 80px; height: 50px; background: blue;"></div>
    <div style="width: 80px; height: 50px; background: red;"></div>
    <div style="width: 80px; height: 50px; background: blue;"></div>
    <div style="width: 80px; height: 50px; background: red;"></div>
    <div style="width: 80px; height: 50px; background: blue;"></div>
    <div style="width: 80px; height: 50px; background: red;"></div>
</div>

1.父容器设置justify-content: flex-start;

2.父容器设置justify-content: flex-end;

3.父容器设置justify-content: center;

4.父容器设置justify-content: space-around;表示子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半；

5.父容器设置justify-content: space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切

6.子容器的设置

（1）属性值flex

子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由flex属性确定。

flex的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是none关键字。子容器会按照flex定义的尺寸比例自动伸缩，如果取值为none则不伸缩。

虽然flex是多个属性的缩写，允许 1 - 3 个值连用，但通常用 1 个值就可以满足需求，它的全部写法可参考下图。

（2）主要是由我今天遇到的一个问题讲flex

<div style="display: flex; width: 200px; height: 500px; border: 1px solid green;">
    <div style="flex: 3 0 50px; background: blue;"></div>
    <div style="flex: 2 0 100px; background: red;"></div>
</div>

如图所示，蓝色宽为80px;红色宽为120px;

1.flex属性值的构成：flex: flex-grow flex-shink flex-basis;
2.flex-basis表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度。
flex-grow表示子容器弹性伸展的比例。
flex-shink表示子容器弹性收缩的比例。
3.上述代码中，首先左侧div占50px,右侧100px;剩余空间200-100-50 = 50
在剩余空间中，左侧按比例伸展3部分，最后宽度占80
右侧按比例伸展2部分，最后宽占120

若将上述代码修改：左侧盒子150px,如图所示，因为没有剩余空间，不会进行伸展；

<div style="display: flex; width: 200px; height: 500px; border: 1px solid green;">
    <div style="flex: 3 0 150px; background: blue;"></div>
    <div style="flex: 2 0 100px; background: red;"></div>
</div>

若将上述代码修改：左侧盒子150px,左侧盒子缩放2倍，如图所示，

<div style="display: flex; width: 200px; height: 500px; border: 1px solid green;">
    <div style="flex: 3 2 150px; background: blue;"></div>
    <div style="flex: 2 0 100px; background: red;"></div>
</div>

<div style="display: flex; width: 200px; height: 100px; border: 1px solid green;">
    <div style="flex: 3 0; background: blue;"></div>
    <div style="flex: 2 0; background: red;"></div>
</div>

 

https://blog.youkuaiyun.com/u010377383/article/details/79661859

注意

如果flex-basis的属性未设置，即flex-basis: 0,那么弹性盒子计算多余空间或者溢出空间的宽度是依据其width的值，如果width未设置，那么是其内容的宽度

如果同时设置了flex-basis的属性值和width的值，那么将会忽略width的值

flex-basis可设为百分比，是相对于祖先申明为display:flex的元素而言