弹性盒子详解
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了弹性盒子详解相关的知识，希望对你有一定的参考价值。
弹性盒子：控制子元素的布局方式
1、display:flex
作用：让当前元素形成弹性盒，控制子元素布局！
特点：
- 弹性盒子的子元素默认情况下，都是沿着主轴排列，默认情况下主轴为x轴。
- 弹性盒里面的子元素都能直接添加宽高。
- 让弹性盒里面一个子元素左右上下居中，直接给子元素添加margin: auto;
主轴排列：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
display: felx;
width: 500px;
height: 375px;
margin: 0 auto;
background: #eee;
}
div{
width: 40px;
height: 40px;
border-radius: 50%;
background: red;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
居中：margin: auto
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 500px;
height: 375px;
background: #eee;
display: flex;
margin: auto;
}
span{
width: 40px;
height: 40px;
background: olive;
margin: auto;
}
</style>
</head>
<body>
<section>
<span>1</span>
</section>
</body>
</html>
2、flex-diretion(改变主轴的排列方向)
顺序制定了弹性盒子在父容器中的位置
- row默认再一行内排列
- row-reverse：翻转横向排列（右对齐，从后往前排，最后一项排在最前面）
- column：纵向排列
- column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
效果：column
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 500px;
height: 375px;
background: #eee;
display: flex;
margin: auto;
flex-direction: column;
}
span{
width: 40px;
height: 40px;
background: olive;
border-radius: 50%;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</section>
</body>
</html>
3、justify-content(主轴对齐方式)
说明：
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
- flex-start默认，顶端对齐
- flex-end末端对齐
- center居中对齐
- space-between俩段对齐，中间自动分配
- space-around自动分配距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 500px;
height: 375px;
background: #eee;
display: flex;
margin: auto;
flex-direction: row;
justify-content: space-around;
}
span{
width: 40px;
height: 40px;
background: olive;
border-radius: 50%;
text-align: center;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</section>
</body>
</html>
4、侧轴的对齐方式
align-items
属性值：
1、Flex-start：弹性盒子元素的侧轴起始位置的边界紧靠住该行的侧轴起始边界。
2、Flex-end：弹性盒子元素的侧轴起始位置的边界紧靠朱该行的侧轴结束边界。
3、Center：弹性盒子元组再该行的侧轴上居中放置。
4、Baseline：如果弹性盒子元素的行内与侧轴为同一条，则该值与flex-start等效。其他情况下，该值将参与基线对齐。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
section{
width: 500px;
height: 375px;
background: #eee;
display: flex;
margin: auto;
flex-direction: row;
justify-content: space-around;//主轴对齐方式
align-items: baseline;//侧轴对齐方式
}
span{
width: 60px;
height: 60px;
background: olive;
border-radius: 50%;
text-align: center;
}
</style>
</head>
<body>
<section>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
</section>
</body>
</html>
以上是关于弹性盒子详解的主要内容，如果未能解决你的问题，请参考以下文章