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 ...
随机推荐
- 三分钟了解B2B CRM系统的特点
最近很多朋友想了解什么是B2B CRM系统,说到这里小Z先来给大家说说什么是B2B--B2B原本写作B to B,是Business-to-Business的缩写.正常来说就是企业与企业之间的生意往来 ...
- PostgreSQL实现字符串拼接
在日常工作中会遇到将多行的值拼接为一个值展现,如果使用过Oracle数据库,可以使用list_agg的聚合函数来实现.那么PostgreSQL也有这样的功能,函数为string_agg.具体用法如 ...
- 关于__new__和__call__的想法
__new__和__call__很像,两个都是用来产生对象的 __new__用来产生的对象是'类',class 时触发(不是) __call__用来产生的对象是'对象',这种对象无法继续产生对象,但是 ...
- 普里姆（Prim）算法
概览 普里姆算法(Prim算法),图论中的一种算法,可在加权连通图(即"带权图")里搜索最小生成树.即此算法搜索到的边(Edge)子集所构成的树中,不但包括了连通图里的所有顶点(V ...
- [Java] Git
版本控制 VCS(Version Control System):版本控制系统 主要功能:版本控制.主动提交.中央仓库 中央仓库功能:保存版本历史.同步团队代码 DVCS(Distributed VC ...
- 佳能m62套机5500 佳能EOS M50 M6 MARK2 II二代 最低到过5800
佳能m62套机5500 佳能EOS M50 M6 MARK2 II二代
- 9.11 strace：跟踪进程的系统调用 、ltrace：跟踪进程调用库函数
strace 是Linux环境下的一款程序调试工具,用于检查一个应用程序所使用的系统调用以及它所接收的系统信息.strace会追踪程序运行时的整个生命周期,输出每一个系统调用的名字.参数.返回值和执行 ...
- mysql中的实例、数据库关系简介
MySQL是单进程多线程(而Oracle等是多进程),也就是说MySQL实例在系 统上表现就是一个服务进程,即进程(通过多种方法可以创建多实例,再安装一个端口号不同的mysql,或者通过workben ...
- 高德Serverless平台建设及实践
导读 高德启动Serverless建设已经有段时间了,目前高德Serverless业务的峰值早已超过十万QPS量级,平台从0到1,QPS从零到超过十万,成为阿里集团内Serverless应用落地规模最 ...
- [论文阅读笔记] Community aware random walk for network embedding
[论文阅读笔记] Community aware random walk for network embedding 本文结构 解决问题 主要贡献 算法原理 参考文献 (1) 解决问题 先前许多算法都 ...