display

display: flex | inline-flex ;

display确定是否启用flexbox布局，flexbox布局下的子元素无论是内联元素的还是块状元素都会flex流的布局方式进行空间分配

flexDirection

flexDirection: row | row-reverse | column | column-reverse;

用来声明主轴的方向和在主轴上排列的方向

values	description
row（默认）	子元素在ltr排版方式下从左向右排列；在rtl排版方式下从右向左排列
row-reverse	与row排列方向相反，在ltr排版方式下从右向左排列；在rtl排版方式下从左向右排列
column	类似于row但是是顶部到底部 column-reverse：类似于row-reverse但是是底部到顶部

flexWrap

flexWrap: nowrap | wrap | wrap-reverse;

flex-wrap属性定义如果主轴上不下如何换行。

values	description
nowrap（默认)	子元素以单行显示，在ltr下自左向右；在rtl下自右向左
wrap	子元素可以以多行显示，在ltr下自左向右；在rtl下自右向左
wrap-reverse	子元素可以以多行显示，与wrap相反

justifyContent

justifyContent: flex-start | flex-end | center | space-between | space-around;

主轴方向上的对齐方式

values	description
flex-start（默认）	子元素从一行的起始处开始放置
flex-end	子元素会从一行的结尾处开始放置
center	子元素会集中在一行的中央
space-between	子元素会被均匀的分布在行内，两端与父容器无间隙
space-around	子元素会均匀的按照等距离分布在一行

效果如下图

alignItems

alignItems: flex-start | flex-end | center | baseline | stretch;

与主轴垂直的方向成为侧轴，alignItems用来定义侧轴方向上的对齐方式

values	description
flex-start	子元素在侧轴起点边的外边距紧靠住该行在侧轴起始的边
flex-end	子元素在侧轴起点边的外边距紧靠改行在侧轴结尾的边
center	子元素会被放置在侧轴的中央
baseline	子元素会根据他们的基线对齐
stretch（默认）	在侧轴方向上拉伸子元素以致填充满flexbox容器。

效果如下图

alignContent

alignContent: flex-start | flex-end | center | space-between | space-around | stretch;

根据在侧轴上的额外空间来排列容器的行，alignContent与alignItems的作用类似，但是只对多行的flex布局才有效果，对单行布局没有效果

values	description
flex-start	行会紧靠容器的起始位
flex-end	行紧靠容器的结束位
center	行紧靠容器的中间位
space-between	每行会均匀分布；首行在容器起始处而最后行在容器结束处
space-around	每行根据相同的距离均匀的分布
stretch（默认）	每行将会伸展以占用剩余的空间

使用效果如下图

flexFlow

flexFlow: ‘flex-direction’ ‘flex-wrap’

相当于同时设置两个属性：

flex-direction: row
flex-wrap: wrap;

flex

flex: flex-grow flex-shrink flex-basis;

flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性，默认值分别是"0 1 auto"，其中第二个和第三个参数（flex-shrink、flex-basis）是可选参数

values	description
flex-grow	一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值 0
flex-shrink	一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值 1
flex-basis	项目的长度。合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。默认值 auto

宽度＝弹性宽度 * ( flexGrow / sum( flexGorw ) )

alignSelf

alignSelf : 'auto | flex-start | flex-end | center | baseline | stretch';

alignSelf属性允许单个元素有与其他元素不一样的对齐方式，可覆盖alignItems属性。默认值为auto，表示继承父元素的alignItems属性，如果没有父元素，则等同于stretch。

Flex布局子元素对齐方式相关推荐

CSS3 Flex布局子元素的属性
弹性布局盒模型的核心,在于弹性容器中子元素的尺寸是弹性的,容器会根据布局的需要,自动调整子元素的尺寸和顺序,并以最佳方式填充所有可用空间. 当容器中有空白空间时,子元素可以扩展,以占据额外的空白空间: ...
CSS基础：flex布局子元素被撑大（文本省略号）
文本撑大子盒子在使用flex布局中,会有下面这样一个问题. 这种问题不但会让盒子撑大,而且还有自己在再使用超过文本长度使用省略号的时候,也会再拉动窗口的时候,变的没有效果. 如下: <!DOC ...
解决uni-app中flex布局子元素宽度溢出
在如下页面中,每一行使用flex布局,每行的头像宽度指定,右侧容器使用flex:1自适应,当name过长时,右侧容器宽度溢出. 页面布局如下 <view class="friend-l ...
css：flex布局子元素宽度被压缩问题
问题如题,父元素设置 flex 布局后,子元素如果超出长度则会被压缩,如图: 解决子元素设置 flex-shrink: 0;,默认值为 1 介绍 flex-shrink 属性 flex-shrin ...
@css flex 布局子内容将父元素撑开
flex 布局子内容将父元素撑开遇到的问题: 需要显示的文本是通过富文本编辑器提交是文本(包含了p标签),展示时通过flex布局实现.如下图: 但是通过flex布局实现后发现文本内容过长时将后半部分 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
flex布局 flex布局的主轴对齐方式
认识flex布局 flex布局弹性布局使用flex布局标签之间没有元素之分(块行内行内块) 可以随意设置宽高父元素添加display:flex 弹性容器子元素自动变成弹性盒子(弹性盒子没有 ...
关于table的中元素对齐方式的注意点
情形一:<td></td>中嵌套了div或table元素. 1.td中的内部元素(如div)设置了height属性,td中设置了vertical-align的情况下,在IE中, ...
css设置字体颜色、文本对齐方式、首行缩进、文本装饰、列表样式、鼠标样式、禁止文本域拖拽、轮廓线、块级元素对齐方式、文字溢出设置
color:设置字体颜色: 取值方式有:1.颜色值red,green等 .2.十六进制#FF0000,#FF2313等.3.RGB代码rgb(225,225,112)或rgb(100%,55%,0%) ...

Flex布局子元素对齐方式