CSS3（一）横向布局（Flex）

前言

前端的div默认是占据一行；而如果想在一行中放多个div，flex布局就是解决这一问题的最好方式；
当然flex也可进行纵向布局，而本章中主要讲解横向布局；
所以下边的属性，一般都以横向布局的眼光来讲解。

一、介绍

flex布局又称弹性盒子，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器外及弹性子元素内是正常渲染的。
弹性盒子只定义了弹性子元素如何在弹性容器内布局。
弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

二、使用方式

1. 基础使用

设置弹性容器的display属性为flex

<div class="flexContainer">
    <div class="flexItem" style="background-color: red">a</div>
    <div class="flexItem" style="background-color: blue">b</div>
    <div class="flexItem" style="background-color: green">c</div>
  </div>
...
.flexContainer {
  display: flex;
  background-color: gray;
  width: 300px;
  height: 100px;
}
.flexItem {
  width: 80px;
  height: 80px;
}

效果图片

2.排列方式flex-direction

使用flex-direction属性，可设置弹性子元素的排列方式

• row：横向，从左向右，左对齐
• row-reverse：横向，从右向左，右对齐
• column：纵向，从上到下，上对齐
• column-reverse：纵向，从下岛上，下对齐

.flexContainer {
  display: flex;
  flex-direction: column-reverse; // 设置此属性
  background-color: gray;
  width: 300px;
  height: 300px;
}

3.对齐方式justify-content

使用justify-content属性，可设置子元素的对齐方式

• flex-start：开头对齐
• flex-end：结尾对齐
• center：居中
• space-between：平均分布，但两边不留控件
• space-around：平均分布，两边留空间
  截图

justify-content是受flex-direction影响的

4.纵向对齐方式align-items

使用align-items属性，可设置子元素纵向的对齐方式；

• flex-start：顶部对齐
• flex-end：底部对齐
• center：居中
• baseline：（未使用，暂不了解）
• space-around：（未使用，暂不了解）
  截图

5.纵向对齐方式align-self

align-self与align-items不同之处在于：
align-items是弹性容器的属性，用来统一设置子元素的；
align-self是弹性子元素的属性，用来单独设置某一个子元素的；

<div class="flexItem align-self-start" style="background-color: red">start</div>
<div class="flexItem align-self-center" style="background-color: blue">center</div>
<div class="flexItem align-self-end" style="background-color: green">end</div>

效果图