Flexbox布局基础

Question

Opened this issue 6 years ago · 0 comments

Flexbox布局概念

抄录来自阮一峰博客

Flexbox是flexible box的简称，以为“弹性布局”，用来为盒状模型提供最大的灵活性。

相比一起的布局方式，Flexbox是一个更强大的方式

	属性名称	属性意义	属性可能的值
容器的属性	flex-direction	决定item排列方向	row(默认) row-reverse column column-reverse
	flex-wrap	排列不下时，item如何换行	nowrap(默认) wrap wrap-reverse
	flex-flow	flex-dirextion和flex-wrap的缩写	默认 row nowrap
	justify-content	item在主轴上的对齐方式	flex-start flex-end center space-between space-around
	align-items	item在另一轴上的对齐方式	flex-start flex-end center baseline stretch
	align-content	多根轴线的对齐方式	flex-start flex-end center space-between space-around
item的属性	order	定义item的排序顺序	整数，默认0，越小越靠前
	flex-grow	当多余空间是，item的放大比例	默认为0，即有多余空间时也不放大
	flex-shrink	当空间不足时，iten的缩小比例	默认为1，即空间不足时缩小
	flex-basis	项目在主轴上占据的空间	长度值，默认为auto
	flex	grow,shrink,basis缩写
	align-self	当个iten独特的对齐方式	同align-item，可覆盖align-items属性

采用Flex布局的元素称为Flex容器,简称"容器".它的多有子元素自动称为容器成员,称为Flex项目,简称"项目"

下图为先关概念的图释

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始的地方（与边框的交叉点）叫做main start，结束为止叫做main end；交叉轴的而开始位置叫做cross start，结束的位置叫做cross end

flex-direction属性觉得主轴的方法(即项目的排列方向)

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

默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不了，如何换行

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

flex-direction和flex-wrap属性的简写形式

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

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

space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

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

.box{
    align-items: flex-start | flex-end | center | baseline | stretch
}

align-content属性定义了多个轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

.box{
    align-content: flex-start | flex-end | center | space-between | space-around | stretch
}

order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

.item {
    order: <integer>
}

flex-grow属性定义项目的放大比例，默认是0，即如果存在剩余空间，也不放大。

.item1 {
    flex-grow: 1 //默认为0
}
.item2 {
    flex-grow: 2
}

如果所有item的flex-grow属性都为1，则它们将等分剩余空间，如果一个项目的flex-grow属性为2，其他项目项目都为1，则前者占据的剩余空间将比其他项多一倍

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的原本大小。

它可以设置为跟width或height属性一样的值，则项目将占据固定空间

flex属性是flex-grow， flex-shrink和flex-basis的简写，默认值为0 1 auto

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