背景

flexbox布局方式旨在容器中的元素在排版，对其，剩余空间处理的问题上提供一个高效的解决方式，无论子元素的大小是已知或未知，动态或者静态。flexbox布局的思想就是通过改变子元素的长、宽、顺序来更好的利用容器的空间。

而且，相比于规则的布局方式如block，inline，flexbox布局方式对于子元素的排列方向也是任意的。

注意：flexbox布局更加适合于应用组件或者小尺寸的布局，对于大尺寸布局，grid更加适合。

一、flex容器属性


1.1 display属性

定义一个容器为flexbox布局，设置其display为flex即可。 该布局仅仅影响其直接子元素。 
.container {
  display: flex; /* or inline-flex */
}
注意css3的columns属性对于flex容器是没有效果的。

1.2 flex-direction属性

flexbox布局是属于单方向布局，意思即子元素的排列方向是横向或者纵向。flex-direction的作用就是这只子元素排列方向。flex-direction有四个可选值：row、row-reverse、column、column-reverse. 

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上

1.3 flex-wrap属性

默认的情况下，flex容器会尝试把所有的直接子元素摆放在一排，但是你可以通过设置flex-wrap属性的值来改变这一 布局方式。flex-wrap有四个值：nowrap、wrap、wrap-reverse 
.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap：该值为默认值，所有的子元素都在一行
wrap：子元素会自动向下换行
wrap-reverse：子元素会自动向上换行


1.4 flex-row属性

这个属性是flex-direction和flex-wrap的简写。 
flex-flow: <‘flex-direction’> || <‘flex-wrap’>

1.5 justify-content属性

justify-content属性有五种属性：flex-start、flex-end、center、space-between、space-around、space-evenly，如果flex-direction方向为row，则这五种属性对于子元素的影响如下：

flex-start (默认): 子元素从开始位置挨着排放
flex-end: 子元素紧挨着容器最后摆放
center: 子元素在摆放在容器中间
space-between: 子元素均匀的摆放在容器; 起一个元素在起始位置, 最后一个元素在最末端。
space-around: 子元素均匀的摆在容器中，每个子元素前面的距离都是一样的，但是子元素之间的距离并不是一样，第一个和最后一个到边缘的距离只是为其他两个子元素距离的一半。
space-evenly: 所有的间距都是一样的，包括第一个和最后一个到边缘的距离。

如果flex-direction属性为column，属性含义相同，对应的是垂直方向布局。

1.6 align-items属性

如果flex-direction方向为row，aign-items属性为元素在垂直方向的布局方式，有五种值：flex-start、flex-end、center、stretch、baseline，这五种值对子元素的影响：

flex-start: 元素垂直方向从上开始摆放
flex-end: 元素垂直方向从下开始摆放
center: 元素垂直方向居中
baseline: 元素垂直方向以第一个元素文本为基准线摆放
stretch (default): 元素垂直方向拉伸填满容器(min-width/max-width仍然有效)

如果flex-direction属性为column，则对应的为水平布局方式。

1.7  align-content属性

这个属性是对多行元素起作用的。例如换行，该元素有五个值，对子元素的影响如下图所示：

flex-start: 顶部对齐
flex-end: 底部对齐
center: 居中对齐
space-between: 均匀对齐，第一个元素在顶部，最后一个元素在底部
space-around: 垂直均匀对齐，每个元素的上下都有相同的间距
stretch (default): 元素垂直拉伸填满容器

二 子元素属性


2.1 order属性

默认情况下，flexbox里面的子元素是按照代码的顺序排列的，但是如果给子元素设置了order属性，则会按照oder大小从左往右或者从右往左排序。

具体使用方法： 
.item {
  order: <integer>; /* default is 0 */
}

2.2 flex-grow属性

这个属性可以让子元素在有必要的时候会自动增长。他接受一个没有单位的值作为增长的比例，他表示该子元素应该占用容器剩余空间的多少。
如果所有的子元素flex-grow设置为1，那么容器中剩余的空间会均匀的分配各所有子元素，如果其中一个子元素的flex-grow设置为2，那么flexbox布局将会试着分配给他的空间是其他子元素的两倍。

具体使用方法： 
.item {
  flex-grow: <number>; /* default 0 */
}
注意：只是接受非负的数字

2.3 flex-shrink属性

赋予子元素收缩的能力，类似于flex-grow 
.item {
  flex-shrink: <number>; /* default 1 */
}

2.4 flex-basis属性

在分配容器剩余的空间前，定义一个元素默认的尺寸。尺寸的值可以是百分数或者具体的尺寸，也可以是关键字auto，当设置为auto的时候，表示参考我的长和宽（在main-size关键字被弃用之前是参考这个值的）。当设置的关键字是content的时候，表示根据子元素的内容来设置其尺寸，但是这个关键字目前支持的不是很好。 
.item {
  flex-basis: <length> | auto; /* default auto */
}
如果值设置为  0, 包含内容的额外的空间不会考虑在内。 如果设为 auto, 额外的空间是一句flex-grow设置的值来分配的。

2.5 flex属性

这个属性是flex-grow、flex-shrink、flex-basis三个属性的简写，第二个和第三个值书可选的。flex默认值为0 1 auto 
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

强烈推荐使用这个flex而不是单独设置各个不同的属性。

2.6 align-self属性

作用同align-items，只是这个属性是作用到子元素的，对某个子元素单独设置align属性 
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
注意：float，clear、vertical-align对于flex元素没有作用。

bugs：https://github.com/philipwalton/flexbugs


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 云原生