文章目录

flex布局flex布局-介绍flex布局-效果flex布局-两根轴线flex布局-容器属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsflex布局-项目属性flex-growflex-shrinkflex-basisorder布局实战布局实战-flex实现水平·垂直居中布局实战-实现卡片列表布局实战-实现导航目录

flex布局

flex布局-介绍

传统的布局有哪些问题：布局的传统解决⽅案，基于盒状模型，依赖 display 属性 / position属性。它对于那些特殊布局⾮常不⽅便，⽐如，垂直居中 就不容易实现。Flex布局是什么？Flex 是 Flexible Box 的缩写，意为”弹性布局”，可以简便、完整、响应式地实现各种⻚⾯布局。 任何⼀个容器都可以指定为 Flex 布局。

flex布局-效果

一个最直观的例子，当有以下HTML代码时

<div class="box"><div class="children">box1</div><div class="children">box2</div><div class="children">box3</div><div class="children">box4</div></div>

默认状态显示为：

当给⽗元素设置成 flex 容器后

.box {display: flex;}

效果变化如下：可以看到变成横向排列了，类似于 inline-block 的效果：

flex布局-两根轴线

两根轴线 — 主轴和交叉轴

我们使⽤ flexbox 的所有属性都跟这两根轴线有关, 所以有必要在⼀开始⾸先理解它。

主轴由 flex-direction 定义，⽽另⼀根轴（交叉轴）垂直于它。flex-direction 主要有两个值：row 、column。

默认时值为row ，主轴即横向的这条线：即沿着inline 的⽅向排列，⽽交叉轴就是垂直于主轴的这条线： 当 flex-direction 设置为 column 时。主轴即纵向的这条线：即沿着 block

排列的⽅向，⽽交叉轴就是垂直于主轴的这条线：

flex布局-容器属性

容器的常用属性

flex-direction：主轴⽅向

flex-wrap ：是否换⾏

justify-content ：主轴对⻬⽅式

align-items ：交叉轴对⻬⽅式

flex-direction

上文已介绍，此处省略

flex-wrap

flex-wrap 常⽤有两个值：nowrap 、 wrap

.box{flex-wrap: wrap;}

flex-flow

wrap和direction的简写属性：flex-flow：row wrap

justify-content

justify-content 属性定义了项⽬在主轴上的对⻬⽅式。常⽤值有：

flex-start（默认值）：左对⻬

flex-end：右对⻬

center： 居中

space-between：两端对⻬，项⽬之间的间隔都相等。

space-around：每个项⽬两侧的间隔相等

align-items

align-items 属性定义项⽬在交叉轴上如何对⻬。

flex-start：交叉轴的起点对⻬。

flex-end：交叉轴的终点对⻬。

center：交叉轴的中点对⻬。

stretch（默认值）：如果项⽬未设置⾼度或设为auto，将占满整个容

器的⾼度。

flex布局-项目属性

在 flex 容器下⾯的每⼀个元素，将其称之为“项目”

项⽬有很多属性，这里只介绍最常⽤的⼀个，那就是 flex 属性，该属性实际上也是以下介绍的三个样式属性的简写。顺序为：增长，缩减，基础； 这⾥描述⼀种写法：

html代码

<div class="box"><div class="children box1">box1</div><div class="children box2">box2</div><div class="children box3">box3</div><div class="children box4">box4</div></div>

css代码

.children {color: #fff;text-align: center;font-size: 28px;background: #1677ff;}.box2,.box4 {flex: 1;/* 这个数字代表“项⽬”所占容器主轴宽度的⽐例 */}.box1,.box3 {flex: 2;background-color: tomato;}

效果展示

flex-grow

指定弹性元素伸展的系数：当父元素有多余的空间时，子元素如何伸展flex-grow：0（默认值），父元素的剩余空间会按照flex-grow设置的比例分配

flex-shrink

指定弹性元素收缩的系数：当父元素空间不足时，子元素如何收缩

flex-basis

指定的是元素在主轴上的基础长度，主轴是横向的则指定的是宽度，主轴是纵向的则指定的是元素高度默认值是auto，表示参考元素自身的高度

order

决定元素的排列属性

布局实战

布局实战-flex实现水平·垂直居中

css代码

.box{display: flex; justify-content: center;align-items: center;}

效果展示

布局实战-实现卡片列表

要求：完成卡⽚的列表排列展示，每个组件之间有适当的间距。每个卡⽚上要添加8px的圆⻆，并带有阴影。

html代码

<div class="box-list"><ul id="card-list"><li class="card"><img class="box-img" src="../assets/pic-1.png"><p class="box-title">波浪</p><p class="box-author">by kk</p><p class="box-description">木落雁嗷嗷，洞庭波浪高</p></li><li class="card"><img class="box-img" src="../assets//pic-2.png"><p class="box-title">落日</p><p class="box-author">by kk</p><p class="box-description">长河落日圆</p></li><li class="card"><img class="box-img" src="../assets//pic-3.png"><p class="box-title">礁石</p><p class="box-author">by kk</p><p class="box-description">东临碣石，以观沧海</p></li></ul></div>

css代码

p {margin: 0;}.card {display: inline-block;margin-right: 16px;padding: 10px;width: 200px;height: 300px;border-radius: 8px;box-shadow: 0 30px 30px 0 rgba(140, 153, 191, 0.20);}.card > p {font-size: 18px;/* 超过一行显示"..." */overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.box-img {width: 100%;height: 120px;object-fit: cover;}.box-title {margin-top: 24px;font-size: 24px;font-weight: bold;}.box-description {margin-top: 12px;color: gray;}

效果展示

布局实战-实现导航目录

要求：完成导航⽬录的排列展示，每个导航分类之间有适当的间距。导航标题与下⽅链接也要有⼀定的间距。

html代码

<div class="container"><div class="nav"><p class="nav-title">书籍</p><ul class="nav-list"><a class="nav-self" href="">《CSS权威指南》</a><a class="nav-self" href="">《Javascript权威指南》</a><a class="nav-self" href="">《深入浅出Node.js》</a><a class="nav-self" href="">《HTML5权威指南》</a></ul></div><div class="nav"><p class="nav-title">资源</p><ul class="nav-list"><a class="nav-self" href="">MDN</a><a class="nav-self" href="">掘金</a><a class="nav-self" href="">Stack Overflow</a></ul></div><div class="nav"><p class="nav-title">进阶</p><ul class="nav-list"><a class="nav-self" href="">Vue</a><a class="nav-self" href="">React</a><a class="nav-self" href="">小程序</a><a class="nav-self" href="">Ant Design</a></ul></div></div>

css代码

p {margin: 0;}ul {list-style: none;padding: 0;}.nav {display: inline-block;vertical-align: top;margin-right: 16px;width: 200px;}.nav-title {color: #999;font-size: 32px;font-weight: bold;}.nav-list {margin-top: 32px;}.nav-self {display: block;color: rgb(60, 133, 243);text-decoration: none;}

效果展示