flex布局的属性及其应用
程序员文章站
2022-05-26 22:23:45
...
flex布局也叫弹性布局 作为前端开发中最常用布局之一，它都有那些属性，有哪些特点，让我们来了解一下。
flex布局的优缺点
1.操作方便，布局简单，移动端使用比较广泛
2.PC端支持情况较差
3.IE低版本不支持flex
以前要想把li标签在一行显示时，要给li加浮动，添加浮动后可能会对下面的内容产生影响(很麻烦)。 当我们学习了flex布局以后就会发现，原来要想让li在一行显示，并不影响其他元素是这样的simpleness
flex属性
在flex布局中也有X和Y轴
flex-direction 设置主轴方向
| row | 默认值从左到右 |
|---|---|
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
当我们要是用flex布局时，要现在元素的父级添加display:flex属性才可可以使用
justify-content设置主轴上子元素的排列方式
在使用这个属性之前一定要先确认好主轴方向
属性：
| flex-start | 默认值 从头部开始 如果主轴是x轴，则从左到右 |
|---|---|
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间 |
案例：
- 让li在一行显示 从左到右显示
<style>
ul {
display: flex;
margin: 0;
padding: 0;
width: 800px;
height: 200px;
list-style: none;
background-color: blue;
/* 默认X轴 */
flex-direction: row;
}
li {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
其他的元素同理 秩序更改 父级元素的代码即可。
flex-wrap设置是否换行
默认情况下，项目都排在一条线上，添加flex-wrap后可以产生换行效果，当我们要做类似表格一样的样式时可以选择添加flex-wrap
nowrap 不换行
wrap 换行
<style>
ul {
display: flex;
margin: 0;
padding: 0;
width: 400px;
height: 200px;
list-style: none;
background-color: blue;
/* 不换行 */
/* flex-wrap: nowrap; */
/* 换行 */
flex-wrap: wrap;
}
li {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
align-items设置侧轴上的子元素排列方式
这个属性控制的是侧轴(Y轴)上的排序方式，在这个元素中只增加了一个属性就是拉伸
| flex-start | 从头部开始 |
|---|---|
| flex-end | 从尾部开始 |
| center | 居中显示 |
| stretch | 拉伸 |
拉伸案例
<style>
ul {
display: flex;
margin: 0;
padding: 0;
width: 600px;
height: 200px;
list-style: none;
background-color: blue;
justify-content: center;
/* 拉伸 子盒子不能给高度 拉伸的高度是负极盒子的高度 */
align-items: stretch;
}
li {
width: 100px;
/* height: 100px; */
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
align-content设置侧轴上的子元素排列方式
这个和之前的主轴上的子元素排列方式是一样的
| flex-start | 默认值 从侧轴头部开始 |
|---|---|
| flex-end | 从侧轴尾部开始排列 |
| center | 在侧轴居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边 再平分剩余空间 |
| stretch | 子级元素高度平分父级元素高度 |
在侧轴居中显示
<style>
ul {
display: flex;
margin: 0;
padding: 0;
width: 600px;
height: 200px;
list-style: none;
background-color: blue;
/* 换行 */
flex-wrap: wrap;
/* 子级居中显示 */
align-content: space-around;
}
li {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
上一篇： Markdown语法学习