FlexBox弹性布局基本用法

内容简介：FlexBox弹性布局基本用法

FlexBox意为弹性布局，是一种布局解决方案，与传统解决方案(基于盒模型，使用浮动，绝对定位)相比，flex布局更加灵活，具有响应式，可以解决在布局上的很多麻烦。优点如下：

• 方便垂直居中
• 改变元素的视觉次序
• 解决盒子空白问题
• 减少浮动问题

2. 一个简单实例看flex的强大——垂直居中

以往让元素垂直居中并不容易，直到CSS3的出现，使用绝对定位配合translate属性才让垂直居中变得简单，不过还有一个更爽的办法，那就是使用flex，让垂直居中变得异常简单

<divclass="wrapper">
    <divclass="div">
        1
    </div>
</div>

几行简单代码，即可让div垂直居中

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

这里最重要的就是包裹元素的三个关键属性

• display: flex 将容器指定为flex布局，任何一个元素都可以指定
• align-items: center 沿交叉轴(下面会介绍)对齐项目,这里指的是垂直方向
• justify-content: center 设置主轴内容对齐方式(下面会具体介绍)

3. 基本概念

使用了flex布局，则flex容器（flex container），子元素为项目(flex item）

这里最重要的就是理解坐标轴，有两个轴，主轴(main axis),交叉轴(cross axis)，start和end表示对应轴的起始位置

这两个轴代表什么取决于Flexbox排列的方向

比如将Flexbox的方向设置为row，则主轴就是横轴，而交叉轴就是纵轴

反之设置成column，则主轴就是纵轴，而交叉轴就是横轴

4. flex容器上的属性使用方法

4.1 flex-direction

定义flex容器的主轴方向来决定felx子项在flex容器中的位置,有四个可选值,分别是 row、row-reverse、 column、 column-reverse

• flex-direction: row(默认) 主轴为水平方向，起点在左端

• flex-direction: row-reverse 主轴为水平方向，起点在右端

• flex-direction: column 主轴为垂直方向，起点在上沿

• flex-direction: column-reverse 主轴为垂直方向，起点在下沿

4.2 flex-wrap

控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。三个可选值，分别是 nowrap、wrap、wrap-reverse

• flex-wrap: nowrap（默认) ：不换行

• flex-wrap: wrap ：换行，第一行在上方

• flex-wrap: wrap-reverse ：换行并反向，第一行在下方

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 如何实现弹性架构
• 仿MIUI弹性列表
• 说说弹性布局
• 弹性盒模型常见例子
• 弹性布局（display:flex;）
• 微服务实例自动弹性伸缩实践

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。