快速搞懂CSS3弹性布局：基础篇

概述

弹性布局，也称为Flex布局，是CSS3新增的一种布局模式。其核心思想是通过指定容器（flex container）和其内部的子元素（flex item）来实现灵活的元素排列和分布。容器是添加弹性布局的父元素，而子元素则是弹性布局容器中的每一个子元素。

弹性布局基础

有如下html以及css。

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.container{
    width: 500px;
    height: 500px;
    border: 1px solid black;
}
.item{
    width: 100px;
    border: 1px solid green;
}

此时页面的渲染效果为：
在这里插入图片描述
**当我们给container容器添加diaplay:flex;属性即可开启弹性布局，其中container容器称为弹性容器，item称为弹性项目。**开启方式如下：

.container{
    width: 500px;
    height: 500px;
    border: 1px solid black;
    display: flex;
}
.item{
    width: 100px;
    border: 1px solid green;
}

在开启了弹性布局之后，样式变为如下图所示：
在这里插入图片描述
我们可以发现将容器设置为弹性布局后，子元素有两个变化：

子元素(弹性项目)变为横向排列
子元素高度进行了拉伸

我们下面来解释下这两个变化。

弹性项目变为横向排列

这个涉及到一个类似坐标系的概念，在开启弹性布局后，会产生一个主轴和侧轴，默认情况下，主轴从左向右，侧轴从上至下，而弹性项目默认情况下是沿着主轴排列的，所以会变为横向。
在这里插入图片描述

弹性项目高度进行了拉伸

这里涉及到一个属性：align-items‌，它决定了弹性元素在侧轴上的排列方式，默认是stretch，即拉伸。在不设置弹性元素的高度情况下，默认就会对其进行拉伸。下面还会对align-items‌属性做详细介绍。

更改主轴方向(修改弹性盒子属性)

可以在弹性盒子(父元素)上设置flex-direction‌属性来指定主轴方向。

水平（row）（默认值）
水平反向（row-reverse）
垂直（column）
垂直反向（column-reverse）

一图胜千言：
在这里插入图片描述

更改主轴排列方式(修改弹性盒子属性)

可以通过justify-content‌属性设置弹性盒子元素在主轴方向上的对齐方式。可以是:

左对齐（flex-start）(默认情况)
右对齐（flex-end）
居中（center）
两端对齐（space-between）
每个项目两侧间隔相等（space-around）

更改侧轴排列方式(修改弹性盒子属性)

通过align-items‌设置弹性盒子元素在交叉轴(侧轴)方向上的对齐方式。可以是起点对齐（flex-start）、终点对齐（flex-end）、居中（center）、基线对齐（baseline）或拉伸以适应容器（stretch）（默认值）。

flex-start
flex-end
center

弹性布局应用-元素居中

之前有很多元素居中的实现，下面看一下使用弹性布局如何居中。

<div class="container">
    <div class="item"></div>
</div>

css的核心设置就是：align-items:center; justify-content: center;

.container{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    display: flex;
    align-items:center;
    justify-content: center;
}
.item{
    border: 1px solid green;
    width: 50px;
    height: 50px;
    background-color: green;
}

结语

通过本篇文章，能够理解弹性布局的基础知识，在后续文章中，将会对弹性布局的伸缩、弹性布局的实践进行介绍，尽情期待！

以上，祝你今天愉快。