最流行的布局方案 Flex 弹性盒布局详解-六虎

我正在参加「启航计划」

Flex布局又称弹性盒布局，是在CSS3中的一种新布局方法，能够简练、方便、响应式地实现各种页面布局，因而自一提出受到了极大地追捧，目前也得到了各大主流浏览器的支撑，因而迅速替代了之前的“display+float+position”的布局方法。

弹性盒布局简介

弹性盒子由弹性容器(Flex container)和弹性质元素(Flex item)组成。
弹性容器经过设置 display 特点的值为flex 或 inline-flex将其界说为弹性容器，不遵从标准文档流的显现方法。
弹性容器外以及弹性质元素内部仍遵从标准文档流，弹性盒布局仅仅界说了弹性质元素在弹性容器内部的布局方法。
弹性容器增加display: flex特点显现为块级元素，增加display: inline-flex显现为行级元素。
设为弹性盒布局以后弹性质元素的float、clear和vertical-align特点将失效，但position特点，依然收效。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 350px;
    height: 150px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
    margin-right: 5px;
}
</style>
<body>
	<div id="container">
		<div id="first">first</div>
		<div id="second">second</div>
		<div id="third">third</div>
		<div id="forth">forth</div>
	</div>
</body>

页面作用：

如上图所示，弹性质元素通常在弹性盒子内一行显现，默许情况每个容器只要一行。

父容器的六大特点

了解两个根本方向，这个牵扯到弹性布局的运用：

主轴：在弹性布局中，咱们会经过特点规则水平/笔直方向为主轴穿插轴：与主轴笔直的另一方向，称为穿插轴

1、flex-direction特点

决议弹性质元素的摆放方向（即界说了主轴方向），可选值：

row（默许值）：主轴为水平方向，起点在左端，子元素从左至右摆放；
row-reverse：主轴在水平方向，起点在右端，子元素从右至左摆放；
column：主轴为笔直方向，起点在上沿，子元素从上向下摆放；
column-reverse：主轴为笔直方向，起点鄙人沿，子元素从下向上摆放；

2、flex-wrap特点

界说假如一行摆放不下如何换行，可选值：

nowrap（默许）：不换行。当容器宽度不行时，每个项目会被揉捏宽度；
wrap：换行，而且第一行在容器最上方；
wrap-reverse：换行，而且第一行在容器最下方；

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-wrap: wrap-reverse;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
    margin-right: 5px;
}
</style>
<body>
 	<div id="container">
  		<div id="first">first</div>
  		<div id="second">second</div>
  		<div id="third">third</div>
  		<div id="forth">forth</div>
  		<div id="five">five</div>
	</div>
</body>

页面作用：

当把wrap-reverse换成wrap：

3、flex-flow特点

flex-direction和flex-wrap的缩写方法，默许值为：row wrap，能够将flex-direction的可选值和flex-wrap的可选值进行任意组合，此处不再做过多赘述。

4、justify-content特点

界说了子元素在在主轴上的对齐方法（此特点与flex-direction息息相关，当flex-direction的取值为row时，起点在主轴左边，取值为row-reverse时起点在主轴右边，column起点在主轴上边，column-reverse-起点在主轴下边）

flex-start（默许值）：项目坐落主轴起点。
flex-end：项目坐落主轴结尾。
center：居中
space-between：两端对齐，项目之间的距离都持平。(最初和最后的项目，与父容器边际没有距离)
space-around：每个项目两边的距离持平。所以，项目之间的距离比项目与边框的距离大一倍。(最初和最后的项目，与父容器边际有必定的距离，距离为项目间距离的一半)

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    justify-content: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="forth">forth</div>
  	</div>
</body>

justify-contet特点为flex-end时：

justify-content特点为center：

justify-content特点为space-between：

justify-content特点为space-around：

5、align-items特点

界说子元素在穿插轴上的对齐方法（flex-direction特点界说主轴方向，与之相笔直的就是穿插轴方向）

flex-start：子元素依照穿插轴的起点对齐。
flex-end：子元素依照穿插轴的结尾对齐。
center：子元素依照穿插轴的中点对齐。
baseline：子元素依照第一行文字的基线对齐。(文字的行高、字体大小会影响每行的基线)
stretch（默许值）：假如项目未设置高度或设为auto，将占满整个容器的高度。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
		<div id="first">first</div>
		<div id="second">second</div>
		<div id="third">third</div>
		<div id="four">four</div>
	</div>
</body>

页面作用：

align-items特点取flex-end:

align-items特点取center

增加第一个子元素的高度和字体大小，align-items特点取baseline

咱们测验将flex-direction特点修正为column，咱们一起来看看会对align-items特点的页面作用发生什么影响：

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
  		<div id="first">first</div>
  		<div id="second">second</div>
  		<div id="third">third</div>
  		<div id="four">four</div>
 	</div>
</body>

页面作用：

当咱们经过flex-direction特点修正主轴方向时穿插轴的方向也随之改动，因而弹性质元素的穿插轴摆放方法也随之改动。我们能够自己测验不同flex-direction取值下align-items特点关于页面布局的影响，此处限于篇幅原因不再逐个测验。

6、align-content特点修正 flex-wrap 特点的行为，相似 align-items, 但不是设置子元素对齐，而是设置行对齐，即align-content特点界说了多根轴线的对齐方法。假如项目只要一根轴线，该特点不起作用。（能够将其视为多行景象下的align-items特点）

flex-start：子元素依照穿插轴的起点对齐。
flex-end：子元素依照穿插轴的结尾对齐。
center：子元素依照穿插轴的中点对齐。
space-between：子元素依照穿插轴两端对齐，轴线之间的距离均匀散布。
space-around：每根轴线两边的距离都持平。所以，轴线之间的距离比轴线与边框的距离大一倍。
stretch（默许值）：轴线占满整个穿插轴。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
        <div id="five">five</div>
        <div id="sex">sex</div>
        <div id="seven">seven</div>
        <div id="eight">eight</div>
	</div>
</body>

页面作用：

align-content特点为flex-end：

align-content特点为center：

align-content特点为space-between：

align-content特点为space-around：

咱们来测验一下flex-wrap特点取wrap-reverse时会对align-content特点的页面作用发生什么影响示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    flex-wrap: wrap-reverse;
    align-content: flex-start;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
 	<div id="container">
        <div id="first">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
        <div id="five">five</div>
        <div id="sex">sex</div>
        <div id="seven">seven</div>
        <div id="eight">eight</div>
 	</div>
</body>

页面作用：

咱们能够看到由于修正了flex-wrap特点，子元素对齐的穿插轴起点也发生了改动，因而此刻flex-start从底部开端对齐，我们能够自己测验一下不同flex-wrap特点下align-content特点页面作用的不同，此处由于篇幅原因不再逐个展示。

子容器的六大特点

1、order特点

界说弹性质元素摆放顺序用整数值来界说摆放顺序，数值小的排在前面。能够为负值，默许为0 示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 350px;
    height: 200px;
}
#container div {
    background-color: yellow;
    width: 80px;
    height: 80px;
}
</style>
<body>
  	<div id="container">
        <div id="first" style="order: 1;">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
	</div>
</body>

页面作用：

由于第一个子元素的order特点为1，其他都为0，所以first子元素排在最后面，其他的排在前面。

2、flex-grow特点

界说子元素的扩大比例。用整数值规则项目将相关于其他灵敏的项目进行扩展扩大的量。默许值是 0，即假如存在剩下空间子元素也不扩展。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 480px;
    height: 200px;
}
#container div {
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;
}
</style>
<body>
   	<div id="container">
        <div id="first" style="flex-grow: 1;">first</div>
        <div id="second">second</div>
        <div id="third" style="flex-grow: 2;">third</div>
        <div id="four">four</div>
 	</div>
</body>

页面作用：

如上图所示，实践上first元素的宽度为本来元素宽度 + 剩下空间的宽度 x (1/3); third元素的宽度为本来元素的宽度 + 剩下空间的宽度 x (2/3)。

3、flex-shrink特点

界说了子元素的缩小比例。整数值规则项目将相关于其他灵敏的项目进行缩短的量。默许值是 1，即假如空间缺乏，该子元素将缩小。假如值为0，则该子元素不揉捏宽度，假如一切子元素的flex-shirnk特点全为0，当宽度不行时部分子元素将挤出父容器。假如值越大，则该子元素缩短的量越大。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 300px;
    height: 200px;
}
#container div {
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;
}
</style>
<body>
    <div id="container">
        <div id="first" style="flex-shrink: 1;">first</div>
        <div id="second" style="flex-shrink: 0;">second</div>
        <div id="third" style="flex-shrink: 2;">third</div>
        <div id="four" style="flex-shrink: 0;">four</div>
  </div>
</body>

页面作用：

如上图所示： second元素和forth元素的宽度都没有缩短，first元素的实践宽度 = first元素的正常宽度 – 缺乏的空间宽度 x (1/3)；third元素的实践宽度 = third元素的正常宽度 – 缺乏的空间宽度 x (2/3)

4、flex-basis特点

界说子元素占有的主轴空间，默许值为auto（假如主轴为水平，则设置这个特点相似于子元素宽度，子元素原width特点将失效；假如主轴为笔直，则设置这个特点相似于子元素的高度，子元素原height特点将失效）可选值：

整数值或百分比，规则子元素占有主轴空间的初始值；
auto：默许值。长度等于元素的长度。假如该项目未指定长度，则长度将根据内容决议。

示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    width: 360px;
    height: 200px;
}
#container div {
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;
}
</style>
<body>
    <div id="container">
        <div id="first" style="flex-basis: 100px">first</div>
        <div id="second">second</div>
        <div id="third">third</div>
        <div id="four">four</div>
    </div>
</body>

页面作用：

从上图咱们能够看出，first元素的实践宽度为100px，覆盖之前界说的width：80px

5、flex特点

flex-grow, flex-shrink 和 flex-basis的简写，默许值为0 1 auto。除了直接分别给flex-grow、flex-shrink 和 flex-basis赋值还能够选取以下值：

auto：与 1 1 auto 相同。
none：与 0 0 auto 相同。
initial：设置该特点为它的默许值，即为 0 1 auto。
inherit：从父元素承继该特点。

6、align-self特点

界说单个项目自身在穿插轴上的摆放方法，能够覆盖掉容器上的align-items特点。特点值：与align-items相同，默许值为auto，表明承继父容器的align-items特点值。示例：

<style>
#container {
    border: 1px dashed red;
    display: flex;
    align-items: flex-start;
    width: 360px;
    height: 200px;
}
#container div {
    background-color: yellow;
    border: 1px solid green;
    width: 80px;
    height: 80px;
}
</style>
<body>
	<div id="container">
		<div id="first">first</div>
		<div id="second">second</div>
		<div id="third" style="align-self: flex-end;">third</div>
		<div id="forth">forth</div>
	</div>
</body>

页面作用：

最流行的布局方案 Flex 弹性盒布局详解

弹性盒布局简介

父容器的六大特点

1、flex-direction特点

2、flex-wrap特点

3、flex-flow特点

4、justify-content特点

5、align-items特点

子容器的六大特点

1、order特点

2、flex-grow特点

3、flex-shrink特点

4、flex-basis特点

5、flex特点

6、align-self特点

相关文章

游戏引擎从零开始(33)-2D渲染器支持旋转

使用 Docker 部署 Spring Boot 项目，带劲！！

好玩系列 | 当SPI 和 设计模式、依赖注入发生碰撞，可以擦出怎样的火花

Vue转React随记

作者信息

好玩系列 | 当SPI 和设计模式、依赖注入发生碰撞，可以擦出怎样的火花