css中的flex布局细节总结，如何用5行核心代码实现双飞翼

最新推荐文章于 2025-03-30 23:51:20 发布

Wennnwin

最新推荐文章于 2025-03-30 23:51:20 发布

阅读量568

点赞数

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/chloexxx/article/details/128040330

版权

css重难点总结

一、flex布局
二、用flex极简实现双飞翼模型

一、flex布局

给定一个body结构，对此进行flex布局。

<body>
    <div class="container">
        <div class="mid">mid</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

1.1 排列方向flex-direction

flex为什么成为一种主流的布局方式？可以说是强迫症福音，flex可以轻松实现等间距的整齐排列，且父级盒子自行撑开不会塌陷。就是所谓的弹性布局，比较灵活。
怎么使用它进行整齐排列？首先要了解他的两个轴。主轴由flex-direction定义，另一根交叉轴就是与之垂直的方向。两个轴主要是用来确定元素排列的方向。
flex-direction:row 是默认值，表示主轴为水平方向。此时子元素水平排列。
flex-direction:column 表示主轴为垂直方向。此时子元素垂直排列。如下图。
使用方式：对父级元素设置。

.container{
	display: flex;
    flex-direction: row(默认)/column/row-reverse/column-reverse
}

1.2 对齐方式align-及justify-

以下为flex布局常用情况，其他的可以在mdn上查看。

justify-content 对多列主轴上的子元素进行对齐，center表示居中，space-between表示子元素之间等距，space-around表示子元素左右间距一致，space-evenly表示子元素之间以及距离父元素均等距。
align-items 对单行交叉轴进行对齐，center居中，start表示顶端对齐，end表示底端对齐，stretch表示子元素拉伸占满父级元素（在没有设置子元素高度时候生效）。
align-self 对某个子元素在交叉轴上进行设置。效果与align-items一致。
align-content 对多行交叉轴进行对齐，效果及用法与justify-content一样。
使用方式：align-self写在需要操作的子元素样式上，其他都写在父级元素样式上。

//对父级元素设置样式：
.container{
	display: flex;
    justify-content:center/space-between/space-around/space-evenly
	align-items:center/start/end/stretch
	align-content:center/space-between/space-around/space-evenly
}

//对子级元素设置样式：
.mid{
	align-self:center/start/end/stretch
}

1.3 控制弹性元素在主轴上的比例

flex-basis 设置子元素在主轴方向上的初始大小。默认是auto，也就是由子元素内容撑开。设置为0，若内容仅为一个字符串（无换行无空格），与auto无差别；否则内容自动换行，子元素宽度为最长的单字符串长度。设为固定像素，通常与设置width效果一致，但若是设定像素<内容宽度，呈现效果与设为0一致。
flex-grow 常用于占满一行，表示子元素主尺寸的 flex 增长系数，可以简单理解为该子元素额外增加的宽度占余下宽度的份数。flex-grow增加的是父元素被占用后剩余的部分。子元素总宽度计算方式：（父宽-所有子元素初始宽度）/ 全部份数 * 该子元素所占份数 + 该子元素初始宽度。
flex-shrink 指定了 flex 元素的收缩规则。数值越大代表压缩越大。仅在默认宽度之和大于容器的时候才会发生收缩。不设置的时候，若子元素初始宽度超过父级元素，每个子元素等比例压缩。子元素最小宽度就是其内容宽度。
使用方式：

.mid{
	align-self:center/start/end/stretch
	flex-basis:auto(默认)/0/200px
	flex-grow:1
	flex-shrink:0.6/2
}

1.4 控制换行

flex-wrap 指定单行显示还是多行显示。设为nowrap，子元素会溢出父级。设为wrap，子级宽度总和超过父级就换行。设为wrap-reverse，在交叉轴上倒叙放置，但是主轴排列顺序不变。
使用方式：

.container{
	display: flex;
    flex-wrap: nowrap(默认)/wrap/wrap-reverse
}

1.5 两种方式简写flex属性

主要按照该属性定义在父级元素样式中or子级元素样式中。

flex-flow 写在父级元素中，是 flex-direction 和 flex-wrap 的简写。第一个值表示flex-direction，第二个值表示flex-wrap。
flex 写在自己元素中，是flex-grow、flex-shrink、flex-basis三种比例元素的简写（注意顺序）。书写方式需注意，两个无单位数字（flex-grow及flex-shrink）+一个像素值（flex-basis）。可以省略其中一个或两个，省略时flex-shrink默认为1，flex-basis默认为0，与初始值auto不一致。默认第一个或唯一一个无单位数字是flex-grow，第二个无单位数字是flex-shrink，像素值是flex-basis。
使用方式：

.mid{
	flex:1; //flex-grow:1;flex-shrink:1(默认);flex-basis:0(默认)
	flex:1 2; //flex-grow:1;flex-shrink:2;flex-basis:0（默认）
	flex:1 2 auto; //flex-grow:1;flex-shrink:2;flex-basis:auto
}

二、用flex极简实现双飞翼模型

用经典的双飞翼模型来做举例说明吧。双飞翼模型一般是左右两侧宽度固定，中间内容部分宽度自适应。双飞翼模型一般把内容部分，即mid，放在第一个定义，可以使得在dom树构建时先加载内容部分，用户体验更好。

<style>
   .container{
       display: flex;
   }
   .mid{
       flex: 1;
       order: 2;
   }
   .left{
       width: 200px;
       order: 1;
   }
   .right{
       width: 200px;
       order: 3;
   }
</style>