Flexbox布局基础

[bai3]

Flexbox布局概念

抄录来自阮一峰博客

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

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

• 在不同方式排列元素
• 重新排列元素的显示顺序
• 更改元素的对齐方式
• 动态地将元素装入容器

Flex属性总结表

	属性名称	属性意义	属性可能的值
容器的属性	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属性

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

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

flex-wrap

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

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

• nowrap: 不换行

  

• wrap: 换行。第一行在上方

  

• wrap-reverse: 换行，第一行在下方

  

flex-flow

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

justify-content属性

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

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

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

align-items属性

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

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

• flex-start: 交叉轴的起点对齐
• flex-end: 交叉轴的终点对齐
• center： 交叉轴的重点对齐
• baseline： 项目的第一行文字的基线对齐
• stretch： 如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

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

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

order

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

.item {
    order: <integer>
}

flex-grow

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

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

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

flex-shrink

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

flex-basis

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

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

flex

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

align-self

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