二、flex弹性布局

最新推荐文章于 2022-11-08 19:36:43 发布

hikankan

最新推荐文章于 2022-11-08 19:36:43 发布

阅读量416

点赞数

分类专栏：前端主流布局文章标签： css css3 html

本文链接：https://blog.csdn.net/hikankan/article/details/123154870

版权

前端主流布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

二、flex弹性布局

2.1 flex弹性概念

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
主轴和交叉轴如图下图：
在这里插入图片描述

2.2 flex容器属性

2.2.1 flex-direction

flex-direction 属性用来决定主轴的方向（即项目的排列方向），属性的可选值如下：

值	描述
row	默认值，主轴沿水平方向从左到右
row-reverse	主轴沿水平方向从右到左
column	主轴沿垂直方向从上到下
column-reverse	主轴垂直方向上从下到上
initial	将此属性设置为属性的默认值
inherit	从父元素继承此属性的值

在这里插入图片描述

2.2.2 flex-wrap

flex-wrap 属性用来设置当弹性盒子的子元素（项目）超出父容器时是否换行，属性的可选值如下：

值	描述
nowrap	默认值，表示项目不会换行
wrap	表示项目会在需要时换行
wrap-reverse	表示项目会在需要时换行，但会以相反的顺序
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

在这里插入图片描述

换行时，会根据父容器的高度进行等分，而不是紧贴着。

注意：flex布局不太适合进行多行布局的

2.2.3 flex-flow

[flex-direction][flex-wrap]

是flex-wrap和flex-direction的简写，先写方向，再写是否换行

2.2.4 juestify-content(主轴对齐)

justify-content 属性用于设置弹性盒子中元素在主轴（横轴）方向上的对齐方式，属性的可选值如下：

值	描述
flex-start	默认值，左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔是相等是
space-around	每个项目两侧的间隔相等
space-evenly	子项之间的间距都是等价的
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

在这里插入图片描述

2.2.5 align-item（每一行的对齐方式）

align-items 属性用来设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，项目将被拉伸以适应容器
center	项目位于容器的中央
flex-start	项目位于容器的顶部
flex-end	项目位于容器的底部
baseline	项目与容器的基线对齐
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

在这里插入图片描述

2.2.6 align-content（整体的对齐方式）

align-content 属性与 justify-content 属性类似，可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式，属性的可选值如下：

值	描述
stretch	默认值，项目将被拉伸以适应容器
center	项目在容器内居中排布
flex-start	项目位于容器的顶部排列
flex-end	项目位于容器的底部排列
space-between	多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around	多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial	将此属性设置为属性的默认值
inherit	从父元素继承属性的值

在这里插入图片描述

2.3 flex-grow扩展比例

flex-grow:默认值是0，表示不占用剩余的空白空隙扩展自己的宽度

如果比例值为1或大于1，就占满剩余的所有空间
若出现多个div，则按flex-grow的值进行等比分配

2.4 flex-shrink收缩比例

flex-shrink：默认值是1，表示flex容器空间不足时，元素的收缩比例

值	描述
flex-shrink:1	自动收缩，跟容器大小相同
flex-shrink:0	不进行收缩
flex-shrink:0.5	收缩移出比例的0.5

多个div时：父容器：500px，A：300px，B：400px

flex-shrink:1；A占300-3/7，B占400-4/7.
A-flex-shrink:2；B-flex-shrink：1；A占300-6/10，B占400-4/10

2.5 flex-basis

flex-basis:默认值是auto，指定了flex元素在主轴方向上的初始大小，覆盖了原来的高度或宽度

值	描述
0	最小宽度
auto	自适应内容
200px	固定大小
100%	自适应父容器

2.6 flex

flex是flex-grow、flex-shrink和flex-basis的缩写
参数说明如下：

flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值）或者以具体的值加 “%”、“px”、“em” 等单位的形式。

值	描述
1	flex-grow:1,flex-shrink:1,flex-basis:0%;
0	flex-grow:0,flex-shrink:1,flex-basis:0%;
auto	flex-grow:1,flex-shrink:1,flex-basis:auto;
1 0 50%	flex-grow:1,flex-shrink:0,flex-basis:50%;

<style>
    .flex {
       display: flex;
       flex-flow: row wrap;
       align-items: flex-end;
       border: 1px solid #CCC;
    }
   .flex div {
       width: 60px;
       height: 60px;
       border: 1px solid black;
    }
   .flex div:nth-child(2) {
       flex:0;
    }
   .flex div:nth-child(4) {
       flex:1 1 auto;
   }
</style>
<body>
    <div class="flex">
        <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
    </div>
</body>