11、弹性布局Flex布局

弹性布局——Flex布局

• 容器：父元素 项目：子元素

容器属性

display:flex;

• 规定了当前元素就是容器元素，告诉浏览器要使用flex布局

• 会让项目在同一行显示

• 占位置

• 而且可以放置多个项目（默认宽度超出容器不会溢出 内容会适应盒子大小），因为有弹性

• 设置前
  

• 不会超出盒子大小
  

flex-direction 项目在主轴上的排列方向 （在容器上设置 四种）

• row : 主轴方向（默认是水平方向），从左到右

• row-reverse : 主轴横向，从右到左

• column: 主轴纵向，从上到下

• column-reverse:主轴纵向，从下到上

justify-content 项目 在主轴上的对齐方式(在容器上设置 六种)

前提是不能占满盒子，否则没有效果

• flex-start:在主轴上的起点对齐

• flex-end:在主轴的终点对齐

• center:在主轴的中心对齐

• space-between:项目间距相等，第一个项目距离主轴起点和最后一个项目距离主轴终点为0

• space-evenly:项目间距都一样，包括第一个跟最后一个距离起点终点位置

• space-around:第一个项目距离起点和最后一个项目距离终点为中间项目间距的一半

align-items项目在交叉轴的对齐方式

• flex-start: 在交叉轴的起点对齐
• flex-end：在交叉轴的终点对齐
• center： 在交叉轴的中心对齐

小技巧

• 在主轴的对齐方式 与在交叉轴的对齐方式 同时使用会在水平垂直居中

  • justify-content: center;
  • align-items: center;

flex-wrap : 设置内容是否换行

• nowrap : 不换行
• wrap : 换行(默认)

设置项目换行后，在交叉轴上的对齐方式

• flex-start:在交叉轴上的起点对齐
• flex-end:在交叉轴的终点对齐
• center:在交叉轴的中心对齐
• space-between：
• space-evenly:
• space-around:

项目属性

order:默认是0，在主轴上 数值越小越靠前

align-self:设置项目交叉轴方向上的对齐方式，用于覆盖容器的align-items

相对于浏览器的可视化高度

<style>
	html{
	height:100%;
}
</style>