一、flex布局与传统布局

传统布局：兼容性好、布局繁琐且不能较好地在移动端布局

flex布局：布局简单方便，很适合在移动端布局，但存在版本兼容支持问题

二、flex布局原理

flex 是 flexible Box 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。

采用 flex 布局的元素，称为 flex 容器（flex container），它的所有子元素自动成为容器成员，称为 flex 项目（flex item）。 flex就是通过给父盒子添加flex属性，来控制子盒子的位置和排列等。

PS：将父盒子设为 flex 布局以后，子元素的 float（浮动）、clear（清除浮动）和 vertical-align（垂直居中）属性将失效。

三、flex布局常见父元素属性

3.1 flex-direction

作用：设置主轴方向，默认为水平从左到右

属性值：row（从左到右，默认）、row-reverse（从右到左）、column（从上到下）、column-reverse（从下到上）

<style>#box2,#box3 {height: 300px;width: 300px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;/* 1.flex-direction: row; *//* 2.flex-direction: row-reverse; *//* 3.flex-direction: column; */flex-direction: column-reverse; }#box2 {background-color: red;}#box3{background-color: green;}
</style><body><div id="box1"><div id="box2">111</div><div id="box3">222</div></div>
</body>

1.row

2.row-reverse

3.column

4.column-reverse

3.2 justify-content

作用：设置主轴上子元素的排列方式（默认从头部方向）

属性值：flex-start（从头部开始，默认）、flex-end（从尾部开始排列）、center（主轴居中对齐）、space-around（平分剩余空间）、space-between（先两边贴边再平分剩余空间）

<style>.item {height: 300px;width: 300px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;justify-content: /* flex-start（从头部开始，默认）flex-end（从尾部开始排列）center（主轴居中对齐）space-around（平分剩余空间）space-between（先两边贴边再平分剩余空间）*/}#box2 {background-color: red;}#box3{background-color: green;}#box4{background-color: yellow;}
</style><body><div id="box1"><div id="box2" class="item">111</div><div id="box3" class="item">222</div><div id="box4" class="item">333</div></div>
</body>

1.flex-start

2.flex-end

3.center

4.space-around

5.space-between

3.3 flex-wrap

作用：设置子元素是否换行（默认不换行）

属性值：nowrap（不换行，默认）、wrap（换行）

PS：不换行时，如果装不开，会缩小子元素的宽度，放到父元素里面

<style>.item {height: 400px;width: 400px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;flex-wrap: /*nowrapwrap*/}#box2 {background-color: red;}#box3{background-color: green;}#box4{background-color: yellow;}#box5{background-color: white;}#box6{background-color: blue;}#box7{background-color: gray;}</style><body><div id="box1"><div id="box2" class="item">111</div><div id="box3" class="item">222</div><div id="box4" class="item">333</div><div id="box5" class="item">444</div><div id="box6" class="item">555</div><div id="box7" class="item">666</div></div>
</body>

1.nowrap

2.wrap

3.4 align-items

作用：设置侧轴上的子元素排列方式，需要子项为单行（默认为拉伸，需要子盒子未指定高度）

属性值：flex-start（从上到下）、flex-end（从下到上）、center（挤在一起居中）、stretch（拉伸，默认）

PS：侧轴为主轴的垂直方向，主轴为水平时方向为从上到下，主轴为垂直时方向为从左到右

<style>.item {height: 400px;width: 400px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;align-items: /*flex-startflex-endcenterstretch*/}#box2 {background-color: red;}#box3{background-color: green;}#box4{background-color: yellow;}#box5{background-color: white;}#box6{background-color: blue;}#box7{background-color: gray;}</style>

1.flex-start

2.flex-end

3.center

4.stretch

3.5 align-content

作用：设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（默认拉伸）

属性值：flex-start（侧轴头部开始）、flex-end（侧轴尾部开始）、center（侧轴中间显示）、space-around（平分侧轴剩余空间）、space-bwtween（先占据两边再平分）、stretch（拉伸，默认）

<style>.item {height: 400px;width: 400px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;flex-wrap: wrap;align-content: /* flex-startflex-endcenterspace-aroundspace-betweenstretch */}#box2 {background-color: red;}#box3{background-color: green;}#box4{background-color: yellow;}#box5{background-color: white;}#box6{background-color: blue;}#box7{background-color: gray;}</style>

1.flex-start

2.flex-end

3.center

4.space-around

5.space-between

6.stertch

3.6 flex-flow

作用：flex-direction和flex-warp的复合属性

属性值：flex-direction和flex-warp属性的组合，第一个为flex-direction属性，第二个为flex-warp属性，可部分省略（如：flex-flow:column）

四、flex布局子元素常见属性

4.1 flex-grow

作用：定义子项目分配剩余空间，需要主轴存在剩余空间（默认为0）

属性值：0（默认，保持初始），正数n（放大因子，占据剩余空间份数）

PS：设置后的宽度（或高度）为原先设置值加上分配得到的

如下例，设置grow的三个元素分配得到的分别为（320-100）=220，（540-100）=440，（760-100）=660

<style>.item {height: 100px;width: 100px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;}#box2 {background-color: red;flex-grow: 1;}#box3{background-color: green;flex-grow: 2;}#box4{background-color: yellow;flex-grow: 3;}#box5{background-color: white;}#box6{background-color: blue;}#box7{background-color: gray;}
</style>

4.2 flex-shrink

作用：超出范围时缩小（默认为1，可缩小）

属性值：0（不可收缩，维持初始大小）、1（可缩小，默认），正数n（收缩因子，被收缩的份数）

例：超出400，两个子元素分别设置shrink为1和3，则前者缩小100，后者缩小300

<style>.item {height: 400px;width: 400px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;}#box2 {background-color: red;flex-shrink: 1;}#box3{background-color: green;flex-shrink: 2;}#box4{background-color: yellow;flex-shrink: 3;}#box5{background-color: white;}#box6{background-color: blue;}#box7{background-color: gray;}</style>

4.3 flex-basis

作用：定义在分配多余空间之前，项目占据的主轴空间（默认为auto，即项目本来大小），浏览器根据这个属性，计算主轴是否有多余空间。

属性值：auto（默认）、xxxpx（项目占据xxxpx）

 <style>.item {height: 400px;width: 400px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;}#box2 {background-color: red;flex-basis: 800px;}#box3{background-color: green;}#box4{background-color: yellow;}#box5{background-color: white;}#box6{background-color: blue;}#box7{background-color: gray;}
</style>

4.4 align-self

作用：使此项目有与其他项目不一样的对齐方式，可覆盖align-items属性（默认为auto，表示基继承align-items属性

属性值：align-items的属性

<style>.item {height: 400px;width: 400px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;align-items: flex-end;}#box2 {background-color: red;align-self: center;}#box3{background-color: green;}#box4{background-color: yellow;align-self: flex-start;}#box5{background-color: white;}#box6{background-color: blue;}#box7{background-color: gray;}</style>

5.5 order

作用：定义项目的排列顺序（默认为0）

属性值：number（数值越小越靠前，与z-index不一样）

 <style>.item {height: 400px;width: 400px;}#box1 {height: 100vh;width: 100vw;background-color: skyblue;display: flex;}#box2 {background-color: red;order: 1;}#box3{background-color: green;}#box4{background-color: yellow;}#box5{background-color: white;order: -1;}#box6{background-color: blue;order: -2;}#box7{background-color: gray;}
</style>

5.6 flex

作用：flex-grow、flex-shrink、flex-basis三者的复合属性

属性值：三者属性值的组合，可部分省略

一篇让你弄懂是什么是flex布局相关推荐

这一篇让你弄懂线性表的链式存储结构
线性表的链式存储结构以及单链表概念本篇内容是线性表链式存储结构的相关概念这里有几篇线性表的干货供大家讨论学习: 这里是吐血总结的线性表顺序存储结构这里是单链表的各种操作,超详细~ 双向链表.循环 ...
css盒子教程,彻底弄懂css盒子模式(div布局快速入门)_css教程
实现结构与表现分离在真正开始布局实践之前,再来认识一件事--结构和表现相分离,这也用CSS布局的特色所在,结构与表现分离后,代码才简洁,更新才方便,这不正是我们学习CSS的目的所在吗?举个例来说P是 ...
快速傅里叶变换（研二的我终于弄懂了）
研二的我仍然对快速傅里叶变换一知半解,于是乎,本着待在家里,能耗时间就多耗点,不知道何年马月我才可以在外面快乐的奔跑~~ 快速傅里叶变换的实现(c++版本) 在做项目的时候,需要用到matlab里的f ...
php 函数有命名空间吗_一篇弄懂PHP命名空间及use的使用
最近一段时间在研究php框架,一直想的什么时候才能开发出自己的框架,当然这是为了提升自己的编程水平,同时能把平时学的零散的东西糅合在一块熟练应用.但是开发一个框架根本不知道如何做起,先开发什么,虽然p ...
终于完全弄懂了KMP(个人理解篇)
前阵子在学习KMP相关的内容,其他部分都挺好理解的,最后在next数组和k=next[k]这个递推公式上迷糊了好久,看了不少人写的博客,有的写着写着最后的结论又跳跃了,有的是写清楚了,但是感觉写的有过 ...
一篇弄懂 offsetWidth、offsetHeight、offsetleft、offsetTop和offsetParent的区别！（1）
快速理解offset之间的区别 1.offsetWidth与offsetHeight 2.offsetParent 3.offsetleft.offsetTop 以下代码均在Chrome浏览器中测试 ...
一篇弄懂 scrollWidth、scrollHeight、scrollLeft和scrollTop的区别！（2）
快速理解scroll之间的区别简介完整代码 1.初始页面: 2.第一次纵向滚动: 3.第一次横向滚动条 4.总结简介 1.scrollHeight/scrollWidth 属性是一个只读属性 ...
【实战篇】是时候彻底弄懂BERT模型了(收藏)
引言本文是[理论篇]是时候彻底弄懂BERT模型了的姊妹篇.在本文中,我们通过
《繁凡的深度学习笔记》前言、目录大纲一文让你完全弄懂深度学习所有基础（DL笔记整理系列）
<繁凡的深度学习笔记>前言.目录大纲 (DL笔记整理系列) 一文弄懂深度学习所有基础 ! 3043331995@qq.com https://fanfansann.blog.csdn.ne ...

一篇让你弄懂是什么是flex布局

一、flex布局与传统布局

二、flex布局原理

三、flex布局常见父元素属性

3.1 flex-direction

3.2 justify-content

3.3 flex-wrap

3.4 align-items

3.5 align-content

3.6 flex-flow

四、flex布局子元素常见属性

4.1 flex-grow

4.2 flex-shrink

4.3 flex-basis

4.4 align-self

5.5 order

5.6 flex

一篇让你弄懂是什么是flex布局相关推荐

最新文章

热门文章