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 ...
随机推荐
- 改善c++程序的150个建议（读后总结）-------19-26
19. 明白在c++中如何使用c c++可以兼容c的绝大部分代码,但是还是有一部分不能兼容. c语言的编译器在调用函数时会把函数翻译成 : "_函数名",例如: int nasa( ...
- Python数模笔记-（1）NetworkX 图的操作
1.NetworkX 图论与网络工具包 NetworkX 是基于 Python 语言的图论与复杂网络工具包,用于创建.操作和研究复杂网络的结构.动力学和功能. NetworkX 可以以标准和非标准的数 ...
- 并查集板子+kruskal
最近在学最小生成树得时候又用到了并查集,一起来整理一下 1.并查集 并查集就是字面意思,将两个单独得集合合并成一个大的集合. 并查集关键在于两个操作:合并和查找 先要完成查找操作(合并操作在查找的基础 ...
- 30.Stream流
5.Stream流 5.1体验Stream流[理解] 案例需求 按照下面的要求完成集合的创建和遍历 创建一个集合,存储多个字符串元素 把集合中所有以"张"开头的元素存储到一个新的集 ...
- Arduino杀手在此！！ESP 8266 NodeMCU小白手把手入门（二）（解惑篇）
上一次更新主要是简单介绍了NodeMCU的基本知识并且进行了一次简单的实操演示,最近有一些读者向我提出了一些小问题,所以决定出一期解惑篇,主要针对的是基础知识不是太牢固,或是喜欢刨根问底的小可爱们.里 ...
- Java Stream 流（JDK 8 新特性）
什么是 Steam Java 8 中新增了 Stream(流)来简化集合类的使用,Stream 本质上是个接口,接口中定义了很多对 Stream 对象的操作. 我们知道,Java 中 List 和 S ...
- linux中级之lvs概念
一.lvs介绍 LVS的英文全称是Linux Virtual Server,即Linux虚拟服务器.它是我们国家的章文嵩博士的一个开源项目.在linux内存2.6中,它已经成为内核的一部分,在此之前的 ...
- STM32自己的封装库
以前一直使用STM32的标准库,需要一步步地将代码加进去,将编译选项设置好,然后再编译整个工程. 这个编译过程是一个相当慢的过程!完全编译大约需要一支烟的时间.每次建立工程都这么编译,是一个相当浪费时 ...
- 统计行数、文件夹个数、文件个数的相关shell命令
极客君最近做项目,刚好遇到需要统计一些sql文件数量的问题,用到一些实用的shell命令,记录下来,以后万一还能用上呢? 如果在终端不打开文件看到一共多少行,则可以使用wc命令来实现: wc -l [ ...
- 企业微信三种token
http://www.upwqy.com/doc/28.html 基本配置介绍 区分三种类型access_token 服务商的token 说明:以corpid(服务商CorpID).provider_ ...