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 ...
随机推荐
- CodeForces - 879
A 题意:就是一共有n个医生,每个医生上班的时间是第Si天,之后每隔d天去上班,问最少多少天能够访问完这n名医生 思路:直接进攻模拟就可以 代码: 1 #include<iostream> ...
- liunx磁盘挂载操作
目标: 欲挂载目录:/home欲挂载磁盘:/dev/sdd 1.查看磁盘使用情况 [root@localhost ~]# df -h 文件系统 容量 已用 可用 已用% 挂载点 devtmpfs 47 ...
- Excel导出数据Excel.Application组件权限设置方法
很多网络应用系统都会涉及到数据采用Excel方式导出的模块,部分朋友问我到底怎么弄,其实方式很多种,目前比较优秀的方式还是直接用Excel的Excel.Application方式比较合适. 采用Exc ...
- [Java] Structs
背景 基于MVC的WEB框架 在表示层过滤访问请求并处理 步骤 在eclipse中创建Web动态项目 导入相关jar包到WEB-INF/lib 在WEB-INF目录下新建web.xml,配置Filte ...
- JNLP配置WIN10
依据网友的反响和我自己的考查,发觉JNLP的情况是大多数网友的困惑之处,针对此问题小编给大总结整理了(关键此)的处理技巧,并对它进以加工改善,整理出JNLP的详细教程,只用你按照1:首先配置电脑的ja ...
- 把一个整体目标设置成多个分阶段目标，完成了一个目标后，就相当于一件事OVER
如果事情有变坏的可能,不管这种可能性有多小,它总会发生 . 一.任何事都没有表面看起来那么简单:二.所有的事都会比你预计的时间长:三.会出错的事总会出错:四.如果你担心某种情况发生,那么它就一定会发生 ...
- HAProxy之三----keepalived配合脚本对HAProxy、ping网关实现高可用检测
调用脚本参数含义 vrrp_script<SCRIPT_NAME> { #定义一个检测脚本,在global_defs之外配置 script <STRING>|<QUOTE ...
- linux进阶之yum管理
一.部署私有repo源 1.官网下载需要的仓库: rsync -avrt --delete rsync://mirrors.ustc.edu.cn/centos/7/cloud/x86_64/open ...
- logstash数据处理及格式化功能详解
Grok正则提取日志 环境延续我上一篇ELK单机版的filebeat-->redis-->logstash-->elasticsearch-->kibana环境,详情请参考: ...
- ALD技术产品形态
ALD技术产品形态 原子层沉积研究设备 TFS 200是适合科学研究和企业研发的最灵活的ALD平台.倍耐克 TFS 200专门设计用于多用户研究环境中把可能发生的交叉污染降至最低. 大量的可用选项和升 ...