Flexbox布局

flex container 父层
flex item 子层
Flexbox布局_第1张图片
属性:
1.flex-direction 属性
flex-direction 属性指定了弹性子元素在父容器中的位置,
在react中flex-direction 的默认值是Colum
其他原生和Vue中flex-direction的默认值为row
(1)row:横向从左到右排列(左对齐)
父层flex-direction为row

Flexbox布局_第2张图片

(2)row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
Flexbox布局_第3张图片
(3)column:纵向排列。
Flexbox布局_第4张图片
(4)column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
Flexbox布局_第5张图片
2.justify-content 属性 (定义了项目在主轴上的对齐方式)
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。
justify-content: flex-start | flex-end | center | space-between | space-around
flex-start:
弹性项目向行头紧挨着填充。这个是默认值。
flex-end:
弹性项目向行尾紧挨着填充。
center:
弹性项目居中紧挨着填充。(如果剩余的自由空间是负的,则弹性项目将在两个方向上同时溢出)。
space-between:
弹性项目平均分布在该行上。
space-around:
弹性项目平均分布在该行上,两边留有一半的间隔空间。
Flexbox布局_第6张图片
3.align-items 属性
可以决定其子元素插入次轴(与主轴垂直的轴,有时若主轴方向为row,则次轴方向为colum)的分隔方式
align-items: flex-start | flex-end | center | baseline | stretch

flex-start:弹性盒子元素的次轴起始位置的边界紧靠住该行的次轴起始边界。
flex-end:弹性盒子元素的次轴起始位置的边界紧靠住该行的次轴结束边界。
center:弹性盒子元素在该行的次轴上居中放置。(如果该行的尺寸小于弹性盒子元素的尺寸,则会向两个方向溢出相同的长度)。
baseline:如弹性盒子元素的行内轴与次轴为同一条,则该值与’flex-start’等效。其它情况下,该值将参与基线对齐。
stretch:如果指定次轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。
(将只有子元素样式中的width属性去掉之后,alignItems: 'stretch’才能生效。)
例子:
Flexbox布局_第7张图片

你可能感兴趣的:(CSS)