css 弹性布局
Posted 知其黑、受其白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 弹性布局相关的知识，希望对你有一定的参考价值。
阅读目录
CSS flex 属性
flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。
让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#main
width:220px;
height:300px;
border:1px solid black;
display:flex;
#main div
flex:1;
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
<p><b>注意:</b> Internet Explorer 9 及更早版本不支持 flex 属性。</p>
<p><b>注意:</b> Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。</p>
<p><b>注意:</b> Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。</p>
</body>
</html>
一、声明定义
容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。
1 声明块级弹性盒子 display:flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
padding: 0;
margin: 0;
article
height: 150px;
margin-left: 100px;
margin-top: 100px;
outline: solid 5px silver;
display: flex;
padding: 20px;
article div
outline: solid 5px orange;
text-align: center;
font-size: 28px;
line-height: 5em;
width: 300px;
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
2 声明内联级弹性盒子 display:inline-flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
padding: 0;
margin: 0;
article
height: 150px;
margin-left: 100px;
margin-top: 100px;
outline: solid 5px silver;
display: inline-flex;
padding: 20px;
article div
outline: solid 5px orange;
text-align: center;
font-size: 28px;
line-height: 5em;
width: 300px;
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
二、flex-direction：用于控制盒子元素排列的方向
使用在 display:flex 的父容器里，改变横轴的方向：
| 值 | 描述 |
|---|---|
| row | 从左到右水平排列元素（默认值） |
| row-reverse | 从右向左排列元素 |
| column | 从上到下垂直排列元素 |
| column-reverse | 从下到上垂直排列元素 |
row-reverse 从右向左排列元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
padding: 0;
margin: 0;
body
margin: 100px;
font-size: 14px;
color: #555;
article
width: 500px;
border: solid 5px silver;
display: flex;
box-sizing: border-box;
padding: 10px;
/* row-reverse 从右向左排列元素 */
flex-direction: row-reverse;
article *
border: solid 5px orange;
padding: 10px;
margin: 10px;
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
column-reverse 从下到上垂直排列元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
padding: 0;
margin: 0;
body
margin: 100px;
font-size: 14px;
color: #555;
article
width: 500px;
border: solid 5px silver;
display: flex;
box-sizing: border-box;
padding: 10px;
/* column-reverse 从下到上垂直排列元素 */
flex-direction: column-reverse;
article *
border: solid 5px orange;
padding: 10px;
margin: 10px;
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
三、flex-wrap
规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
| 选项 | 说明 |
|---|---|
| nowrap | 元素不拆行或不拆列（默认值） |
| wrap | 容器元素在必要的时候拆行或拆列。 |
| wrap-reverse | 容器元素在必要的时候拆行或拆列，但是以相反的顺序 |
行元素换行 row 、wrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
padding: 0;
margin: 0;
outline: solid 1px silver;
padding: 10px;
margin: 10px;
head
display: block;
background:#eee;
body
font-size: 14px;
color: #555;
article
width: 500px;
height: 250px;
border: solid 5px silver;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
article div
border: solid 5px orange;
padding: 30px 80px;
margin: 10px;
text-align: center;
font-size: 28px;
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
水平排列反向换行 row 、wrap-reverse
flex-direction: row;
flex-wrap: wrap-reverse;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
padding: 0;
margin: 0;
outline: solid 1px silver;
padding: 10px;
margin: 10px;
head
display: block;
background:#eee;
body
font-size: 14px;
color: #555;
article
width: 500px;
height: 250px;
border: solid 5px silver;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
article div
border: solid 5px orange;
padding: 30px 80px;
margin: 10px;
text-align: center;
font-size: 28px;
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
垂直元素换行 column 、wrap
flex-direction: column;
flex-wrap: wrap;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
padding: 0;
margin: 0;
outline: solid 1px silver;
padding: 10px;
margin: 10px;
head
display: block;
background:#eee;
body
font-size: 14px;
color: #555;
article
width: 500px;
height: 350px;
border: solid 5px silver;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
article div
border: solid 5px orange;
padding: 30px 80px;
margin: 10px;
text-align: center;
font-size: 28px;
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
垂直元素反向换行 column wrap-reverse
flex-direction: column;
flex-wrap: wrap-reverse;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*
padding: 0;
margin: 0;
outline: solid 1px silver;
padding: 10px;
margin: 10px;
head
display: block;
background:#eee;
body
font-size: 14px;
color: #555;
article
width: 500px;
height: 350px;
border: solid 5px silver;
box-sizing: border-box;
padding: 10px;
display: flex;
flex-direction: column;
flex-wrap: wrap-reve以上是关于css 弹性布局的主要内容，如果未能解决你的问题，请参考以下文章
web前端入门到实战：html/css弹性布局的几大常用属性详解