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 ...
随机推荐
- 第一周JVM核心技术-工具与GC策略
一. JDK工具 1.1 内置命令行工具 工具 简介 jps/jinfo 查看java进程 jstat 查看JVM内部GC信息 jmap 查看JVM堆或类占用空间信息 jstack 查看线程信息 jc ...
- 【Mybatis源码解析】- 整体架构及原理
整体架构 version-3.5.5 在深入了解Mybatis的源码之前,我们先了解一下Mybatis的整体架构和工作原理,这样有助于我们在阅读源码过程中了解思路和流程. 核心流程 在上一遍的入门程序 ...
- 从effective C++中窥探C++11特性
这几天在看effective C++3rd,这本书算是比较经典的一本入门C++的书了.虽然年代比较久远书中讲的好多模式已经被的新特性取代了,但是从这些旧的模式中可以了解到一些C++新特性设计的初衷,也 ...
- [刷题] 104 Maximum Depth of Binary Tree
要求 求一棵二叉树的最高深度 思路 递归地求左右子树的最高深度 实现 1 Definition for a binary tree node. 2 struct TreeNode { 3 int va ...
- 【转载】Linux命令-自动挂载文件/etc/fstab功能详解[转]
博客园 首页 新随笔 联系 订阅 管理 随笔 - 322 文章 - 0 评论 - 19 Linux命令-自动挂载文件/etc/fstab功能详解[转] 一./etc/fstab文件的作用 ...
- Java 中布尔（boolean）类型占用多少个字节
为什么要问这个问题,首先在Java中定义的八种基本数据类型中,除了其它七种类型都有明确的内存占用字节数外,就 boolean 类型没有给出具体的占用字节数,因为对虚拟机来说根本就不存在 boolean ...
- python3 列表转换为字符串
join将列表转换为字符串 list1 = ["张三","李四","王五"] a1 = ','.join(list1) print(a1) ...
- linux动态链接库和静态链接库
Linux下静态链接库与动态链接库的区别 引言 通常情况下,对函数库的链接是放在编译时期(compile time)完成的.所有相关的对象文件 (object file)与牵涉到的函数库(librar ...
- centos7 启动docker失败
现象:Centos7.3通过yum安装完docker后,启动docker失败 机器的系统版本:CentOS Linux release 7.3.1611 (Core) centos7,执行完安装命令: ...
- 记一次zabbix-server故障恢复导致的事故 zabbix-server.log -- One child process died
前言 zabbix-server昨天出了个问题,不停的重启.昨天摆弄到晚上也不搞清楚原因,按照网上说的各种操作,各种CacheSize.TimeOut.StartPollers都改了,还有什么Incl ...