f020b2741472e97726e3b21c47dbf9e7.png

一、什么是Flex弹性盒？

Flex弹性盒，意为“弹性布局”，用来为盒状模型提供最大的灵活性。

当一个元素 display:flex 的时候，内部元素float会失效，vertical-align也会失效

因此我们至少能确定一点，flex替代了浮动的解决方案。

我们来看一下它的基本特点。

在flex容器当中，div这样的块元素不再独占一行

而是自动排成一行。

6b84cbe00aac29508d87ea167ca2e3f0.png

这个效果虽然和浮动很像, 但是请记住, 在flex的容器里, 不存在浮动的概念, 我将代码贴出来, 大家可以自行尝试.

<style type="text/css">
	html, body {
		padding: 0; margin: 15px;
	}
	.container {
		display: flex;
		height: 300px; width: 700px;
		box-shadow: 0 0 0 1px black;
	}
	div {
		width: 200px; height: 200px;
	}
	div:nth-child(1) {
		background-color: pink;
	}
	div:nth-child(2) {
		background-color: lightseagreen;
	}
	div:nth-child(3) {
		background-color: powderblue;
	}
</style>
<body>
	<section class="container">
		<div>
			<p>div容器</p>
			<p>width: 100px</p>
			<p>height: 100px</p>
		</div>
		<div>
			<p>div容器</p>
			<p>width: 100px</p>
			<p>height: 100px</p>
		</div>
		<div>
			<p>div容器</p>
			<p>width: 100px</p>
			<p>height: 100px</p>
		</div>
	</section>
</body>

dispplay: flex的元素，称为Flex容器（flex container），它的所有子元素称为Flex项目（flex item）。

在flex容器当中, 项目的排列方式默认是row(水平的). 可以使用flex-direction属性进行更改

.container {
    display: flex;
    flex-direction: row;  /*这是默认值, 按照row(水平方向)排列*/
}

如果将这个属性进行更改column

.container {
    display: flex;
    flex-direction: column;  /* 按照列column(垂直方向)排列*/
}

效果如下:

32886a5f7ab84d5434fa8be99aadfdea.png

你看, flex容器里的项目, 变成了垂直方向, 由上至下排列

对于一个flex容器来说, 子项目的排列方向, 只有row和column这两种,

怎么样, 很简单把?

当然, 项目不仅可以从左向右, 还可以反过来, 从右向左

.container{
    display: flex;
    flex-direction: row-reverse;/* 按照行(反方向)排列*/
}

效果如下:

de706331dbfaf60b415af3854a6cfc90.png

垂直方向也是如此

.container{
    display: flex;
    flex-direction: column-reverse;/* 按照列(反方向)排列*/
}

ddba4c57cbc6a086e86d351b2ea1f2e9.png

一个flex容器, 子项目默认是不换行的

当然, 想要换行的话, 可以通过flex-wrap属性可以修改

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

我们还可以通过 justify-content属性 设置「主轴」的对齐方式

注意:主轴的方向不一定是水平方向 它是由flex-direction决定的. 可以是 row方向 也可以 column方向, 下面的例子假定主轴为row, 因此column方向为对应 侧轴 
.container {
     justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start 可以理解为左对齐

fe99266ff2137807418ca2877018953d.png
flex-end 可以理解为右对齐

b5515330546c3458c501660457467872.png
center 居中对齐

3c25921e5694576d19dba9dbb814e268.png
space-between 两侧对齐

43bc5f9e238ffa4738383d3b1d03e46f.png
space-around 两侧间隔均匀

836f896dca3cde9fa48598002fa2a7fe.png

如果flex容器是固定高度的, 且大于了子元素, 这时, 我们可能还需要侧轴(垂直方向)的对齐方式

align-items属性定义项目在交叉轴上如何对齐。 
.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start 可以理解为顶部对齐

950182d643bf8dc26d587147426723b1.png
flex-end 底部对齐

34542705c63b7f6fd9c434e6a04c3bf8.png
center 中部对齐

fbefb960899cd9a8418ddbf1cd3d9be8.png
baseline 基线对齐

87eeffc2e3f5d61e287872030f0db53a.png
stretch 上下两侧对齐

950182d643bf8dc26d587147426723b1.png
子元素设置了高度, 因此没有效果

cb94fd3b2d480ea5d6fbb9dd7ea0dae7.png
子元素没有设置高度

简单总结一下

弹性盒的容器属性（添加在父元素身上 ）

1 display:flex;属性

.box{
   display: -webkit-flex; /* Safari或者chrome*/
   display: flex;
}

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

同时，需要加上-webkit-前缀，兼容-webkit-低版本写法。

2 flex-direction属性

flex-direction属性决定主轴的方向（即容器内子元素的排列方向）。

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

3 flex-wrap属性

默认情况下，子元素都排在一条线（又称”轴线”）上, 不换行。flex-wrap属性定义是否换行, 以及换行方式

.box{
    flex-wrap: nowrap | wrap | wrap-reverse;
}

4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

.box {
     justify-content: flex-start | flex-end | center | space-between | space-around;
}

5 align-items属性

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

.box {
    align-items: flex-start | flex-end | center | baseline | stretch;
}
千锋HTML5学院：css伪元素的实用技巧​zhuanlan.zhihu.com
aca97420f797145214584f83efac5448.png
千锋HTML5学院：如何讲清楚Flex弹性盒模型(中)？​zhuanlan.zhihu.com
cb0cb2426ec83b981276e495a2edf20d.png
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生