Flex布局入门-CSDN博客

一、Flex介绍

Flex作为目前主流的弹性布局方式，已经能够完成日常工作中绝大多数场景。本片将结合实例讲述Flex布局中一些常用属性。关于兼容性，请移步MDN Flex布局兼容性。

二、如何使用

如何启用flex布局，很简单，只要按如下设置。

div {
    display: flex;
}
复制代码

让我们看看效果，当不设置flex布局，我们写两个div。

<div>
  <div>我是div1</div>
  <div>我是div2</div>
</div>
复制代码

界面如下：

然后我们给外层 div设置 class为 content，通过类设置 display为 flex

.content {
    display: flex
}
<div class='content'>
  <div>我是div1</div>
  <div>我是div2</div>
</div>
复制代码

然后界面变成这样：

内部的两个div仿佛变成了行内元素，出现了在一行内。为什么会这样呢？这就得说到flex布局的几个重要属性了。

三、重要属性

再说属性之前，我们先说两个重要概念，我们将一个div设置为flex布局后，这个div就相当于多了两个属性，主轴和交叉轴，默认主轴自左向右，交叉轴自上向下可以按下图进行理解：

我们回到之前，我们设置父盒子为flex布局后，内部的两个div并列到了一行的问题上，这个原因就是 当我们设置一个元素的布局方式为flex后，该元素内部的元素都将按主轴依次排列，当元素超出一行并且需要换行时将会按交叉轴进行换行。接下来所讲的属性都将围绕主轴和交叉轴来进行说明。

1. flex-direction

竟然存在主轴那我们就可以定义其主轴方向，而定义主轴方法就要通过flex-direction这个属性，该属性分别有以下值：

flex-direction: row(默认) | row-reverse | column | cloumn-reverse
row: 主轴在水平方向，从左至右；
row-reverse：主轴在水平方向，从右至左；
column：主轴在垂直方向，从上至下；
cloumn-reverse：主轴在垂直方向，从下至上。
复制代码

让我们来看看例子，假设我们现在想实现以下效果。

我们想将两个按钮固定到页面的右侧，这是只需要设置两个按钮的外层盒子为flex布局，同时设置主轴方向水平，从右至左，代码如下：

.content2 {
  display: flex;
  flex-direction: row-reverse;
}
<div class="content2">
  <button>按钮1</button>
  <button>按钮2</button>
</div>
复制代码

2. justify-content

我们除了可以自定义主轴方向还可以规定盒子内各元素在主轴上的对齐方式，通过属性justify-content，该属性包含以下值：

justify-content: flex-start(默认) | flex-end | center | space-between | space-around
flex-start: 左对齐
flex-end：右对齐
flex-center：具中对齐
space-between：两端对齐，元素之间的间隔相等
sapce-around：项目两侧间隔相等
复制代码

让我们来看一个页面布局最长见的一种情况通过justify-content如何实现。现在我们想实现如下效果，让输入框和确认按钮分别位于页面两端：

代码如下：

.content3 {
  border: 1px solid #000;
  padding: 5px;
  height: 100px;
  width: 300px;
  display: flex;
  justify-content: space-between; // 两端对齐
}
button {
  height: 30px;
}
input {
  height: 30px;
}
<div class="content3">
  <input />
  <button>确认输入</button>
</div>
复制代码

3. align-items

说完主轴，我们来说说交叉轴上的属性，align-items即定义项目在交叉轴上的对齐方式，该属性有以下取值：

align-items: flex-start | flex-end | center | baseline | stretch（默认）
flex-start: 交叉轴起点对齐；
flex-end：交叉轴终点对齐；
center：交叉轴具中对齐；
baseline：每个项目的第一行文字对齐；
stretch：如果项目未设置高度或者设置的高度为auto，将占满整个交叉轴
复制代码

让我们来看看应用实例，我们想实现如下左右上下垂直具中：

代码如下：

.content4 {
  border: 1px solid #000;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center; // 设置主轴方向具中对齐
  align-items: center; // 设置交叉轴方向具中对齐
}
.sub_div {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}
<div class="content4">
  <div class="sub_div"></div>
</div>
复制代码

四、实现一个简单的登陆页面

接下来，我们通过flex布局进行简单运用，来实现下面这个简单登陆页面

代码如果，注意看代码内的分析

.login_page {
  height: 180px;
  width: 300px;
  border: 1px solid #000;
  padding: 10px;
}
.username {
  margin: 20px;
  display: flex; // 设置用户名域为flex布局
  justify-content: space-between; // 设置主轴两端对齐
}
input {
  width: 180px;
}
.password {
  margin: 20px;
  display: flex; // 设置密码域为flex布局
  justify-content: space-between; // 设置主轴两端对齐，与上面用户名域对齐
}
.button_field {
  margin: 20px;
  padding: 0 40px; 设置左右内边距，让按钮向中间缩紧
  display: flex; // 设置按钮域为flex布局
  justify-content: space-between; // 设置主轴两端对齐
}
button {
  width: 60px;
}
<div class="login_page">
  <div class="username">
    <span>用户名</span>
    <input />
  </div>
  <div class="password">
    <span>密码</span>
    <input />
  </div>
  <div class="button_field">
    <button>注册</button>
    <button>登陆</button>
  </div>
</div>
复制代码