css--flex弹性布局详解和使用
前言
前端开发最基础的能力是根据 ui 设计稿迅速还原页面，拿到设计稿不要急于写代码，首先要对页面进行分析，对页面的整体布局有个大概的了解，然后先实现一个整体的布局，再把布局拆分成逐个小模块，逐个去实现页面效果，基于传统的 float，div+css 等布局的方法，这篇文章总结一下 flex 布局在开发中使用。
正文
1.flex布局属性总结
flex 弹性布局，首先需要给盒子设置 display:flex。下面总结一下具体的使用属性。
（1）flex-direction 主轴方向属性
<style>
.wrap {
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
}
.item {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: pink;
}
</style>
<body>
<div class="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
a. flex-direction: row; 该属性使得子元素横向在父元素盒子最左边从左向右排列，当父盒子宽度不够时会挤压子元素的宽度。
.wrap {
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
}
b. flex-direction: column; 该属性使得子元素纵向从父元素最上边从上向下排列，当父盒子的高度不够时会挤压子元素的高度。
.wrap {
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: column;
}
c. flex-direction: row-reverse; 该属性使得子元素横向从父元素最右边从右向左排列，当父盒子宽度不够时会挤压子元素的宽度。
.wrap {
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row-reverse;
}
.wrap {
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: column-reverse;
}
（2）felx-wrap 换行属性。规定主轴的宽度或者高度不够时，是否换行属性。
<style>
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
}
.item {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: pink;
}
</style>
<body>
<div class="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
a.flex-wrap: nowrap. 默认属性，不换行，当宽度或者高度不够出现了挤压的情况。
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
b.flex-wrap: wrap.允许子元素在父元素主轴的方向上换行，例如此例从上至下换行。
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
上面的代码由于边框存在，导致宽度不够出现了换行。
c.flex-wrap: wrap-reverse.允许子元素在父元素主轴的反方向上换行，例如此例从下至上换行。
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
}
（3）justify-content 主轴元素对齐方式属性
<style>
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
}
.item {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: pink;
}
</style>
<body>
<div class="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
a. justify-content : flex-start ，该属性设置子元素在父元素开始到结束的方向排列，即从左到右从上到下。
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
b. justify-content : flex-end ，该属性设置子元素在父元素主轴结束到开始的方向排列，和 flex-start 相反，但是不改变子元素的前后顺序，相当于子元素组成的一个整体，这个整体平移到父元素主轴结束的位置。
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
c. justify-content : center，该属性设置子元素在父元素主轴中间的位置开始排列，但是不改变子元素的前后顺序，相当于子元素组成一个整体，这个整体平移到父元素中间的位置。
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content:center
}
d. justify-contet : sapce-around，该属性设置每个子元素两侧的间隔相等，所以每个子元素之间的间隔要比子元素相对于父元素边框的间隔大一倍。
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content:space-around ;
}
e. justify-content : space-between，该属性设置每个子元素之间的间隔相等，子元素于父元素边框之间没有间隔。
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: space-between;
}
（4）algin-items 交叉轴元素对齐方式属性,最好在一条轴线的时候使用该属性。
<style>
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
}
.item1 {
width: 70px;
border: 1px solid black;
background-color: pink;
}
.item2 {
width: 60px;
height: 80px;
font-size: 18px;
border: 1px solid black;
background-color: pink;
padding-top: 10px;
}
.item3 {
font-size: 24px;
width: 30px;
border: 1px solid black;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item3">4</div>
<div class="item1">5</div>
<div class="item2">6</div>
</div>
</body>
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: flex-end;
}
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: center;
}
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: baseline;
}
.wrap {
margin: 150px auto;
width: 400px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: stretch;
}
（5）algin-content 多条轴线时元素在交叉轴的对齐方式属性，如果项目只有一根轴线，该属性不起作用。相当于把每条主轴线看作一个整体元素，对每条轴线元素进行排列。
<style>
.wrap {
margin: 150px auto;
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 90px;
height: 100px;
border: 1px solid black;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
.wrap {
margin: 150px auto;
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
}
.wrap {
margin: 150px auto;
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-end;
}
.wrap {
margin: 150px auto;
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.wrap {
margin: 150px auto;
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-between;
}
.wrap {
margin: 150px auto;
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around;
}
2.flex布局在开发中的使用以及需要注意的问题。
（1）当每条轴线长度相等时候
<style>
.wrap {
border: 1px solid red;
width: 400px;
height: 400px;
margin: 100px auto;
padding: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
}
.item {
margin-top: 5px;
width: 30%;
height: 100px;
border: 1px solid pink;
}
</style>
<body>
<div class="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
轴线长度不同时，同样上面的代码就成为如下图所示：
（2）当每条轴线长度不相等时候会出现上面的情况，要想解决这样的问题，可以在后面补充一个占位的div，具体代码如下：
<style>
.wrap {
border: 1px solid red;
width: 400px;
height: 400px;
margin: 100px auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: flex-start;
}
.wrap::after {
content: "";
height: 0;
width: 30%;
}
.item {
margin-top: 5px;
width: 30%;
height: 100px;
border: 1px solid pink;
}
</style>
<body>
<div class="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
同样也可以通过添加隐藏占位元素的方法：
<style>
.wrap {
border: 1px solid red;
width: 400px;
height: 400px;
margin: 100px auto;
padding: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
}
.item {
margin-top: 5px;
width: 30%;
height: 100px;
border: 1px solid pink;
}
.hidden{
visibility: hidden;
}
</style>
<body>
<div class="wrap">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item hidden">6</div>
</div>
总结
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。
css--flex弹性布局详解和使用的更多相关文章
- day17—Flex弹性布局详解（一）
转行学开发,代码100天——2018-04-02 今天看到一篇大神的文章,关于flex布局的详解,对flex用法介绍的相当详细,非常有助于我等初学者更深入了解这种布局方式. 文章链接 [基础知识]Fl ...
- day18—Flex弹性布局详解（二）
转行学开发,代码100天——2018-04-03 2.6 align-content属性 align-content 属性定义了在交叉轴方向对齐方式和额外空间分配,类似于justify-content ...
- 弹性布局详解——5个div让你学会弹性布局
前 言 JRedu 在网页制作过程中,布局是我们最重要的一个环节.可以说布局的好坏直接影响到整个网页的成败!布局成,则事半功倍:布局败,则事倍功半. 随着移动互联的到来,响应式网站风靡.这也就兴 ...
- css flex弹性布局学习总结
一.简要介绍 flex( flexible box:弹性布局盒模型),是2009年w3c提出的一种可以简洁.快速弹性布局的属性. 主要思想是给予容器控制内部元素高度和宽度的能力.目前已得到以下浏览器支 ...
- CSS Flex弹性布局
关于css3的flex布局,阮一峰老师的文章写的清晰易懂又全面,这里附上链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_s ...
- 弹性盒布局详解(display: flex;)
弹性盒布局详解 弹性盒介绍 弹性盒的CSS属性 开启弹性盒 弹性容器的CSS属性 flex-direction设置弹性元素在弹性容器中的排列方向 主轴与侧轴(副轴) flex-wrap设置弹性容器空间 ...
- flex弹性布局属性详解！
详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...
- css进阶之二：flex弹性布局
布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
随机推荐
- [DB] Redis
为什么用Redis 是什么 一个小程序 缓存 & 数据库 单线程worker 新版本:IO threads epoll:多路复用 与Memcache区别 支持持久化:RDB快照.AOF日志 丰 ...
- 013.Ansible Playbook include
一 include 当项目越大,tasks越多的时候.如果将多有的task写入一个playbook中,可读性很差,就需要重新组织playbook 可以把一个playbook分成若干份晓得palyboo ...
- Linux_配置认证访问FTP服务
[RHEL8]-FTPserver:[Centos8]-FTPclient !!!测试环境我们首关闭防火墙和selinux(FTPserver和FTPclient都需要) [root@localhos ...
- Sqli-labs-master通关解析（持续更新中。。。）
大多情况下:SQL注入其实就是构造正确的mysql命令,让网页回显本不应该让我们看到的数据(如用户的账号和密码). 第一关-联合查询注入 查库 // 查看当前页面在的数据库 ?id=-1' union ...
- numpy tile()函数
tile(A,B)即在B的方向上,重复A 直接举栗子: A=[1,2] tile(A,2) 此时B=(2) ,B的方向仅包含列方向,将A在列方向上重复一次,得出结果如图1所示 图1-将A在列方向重 ...
- 回归(regression)与分类(classification)的区别
术语监督学习,意指给出一个算法,需要部分数据集已经有正确的答案. " 分类和回归的区别在于输出变量的类型. 定量输出称为回归,或者说是连续变量预测:定性输出称为分类,或者说是离散变量预测. ...
- ExpressionHelp2
public static class ExpressionHelp { private static Expression<T> Combine<T>(this Expres ...
- Python小白的数学建模课-04.整数规划
整数规划与线性规划的差别只是变量的整数约束. 问题区别一点点,难度相差千万里. 选择简单通用的编程方案,让求解器去处理吧. 『Python小白的数学建模课 @ Youcans』带你从数模小白成为国赛达 ...
- Log4j实战，依赖分析
背景 在项目中经常被log4j的各种依赖冲突搞的焦头烂额,久病成良医啊,在这里记录一下我对log4j的理解与分析 log4j 与 log4j2 log4j2是log4j的升级版,二者互不兼容,据说lo ...
- Step By Step(Lua模块与包)
Step By Step(Lua模块与包) 从Lua 5.1开始,我们可以使用require和module函数来获取和创建Lua中的模块.从使用者的角度来看,一个模块就是一个程序库,可以通过requi ...