概述
flex 之前的布局方式
-
normal flow（正常流或叫文档流） -
float+clear -
position relative+absolute display inline-block- 负
margin
flex 布局特点
- 块级元素侧重垂直方向、行内布局侧重水平方向，flex 布局是与方向无关的。
- flex 布局可以实现空间自动分配、自动对齐（flexible：弹性、灵活）
- flex 适用于简单的线性布局，更复杂的要交给gird 布局
flex container的六大属性：
| 属性 | 含义 |
|---|---|
flex-direction | 方向 |
flex-wrap | 换行 |
flex-flow | 上面两个的简写 |
justify-content | 主轴方向对齐方式 |
align-items | 侧轴对齐方式 |
align-content | 多行/列内容对齐方式（用的较少） |
解释：flex-direction：inherit 继承initial 起始row(默认) 一行展示row-reverse 反向一行column 一列排列column-reverse 反向一列排列
flex-wrap：nowrap(默认) 不换行wrap 换行
justify-content：space-between 多的空间放在所有元素中间space-around 多的空间放在所有元素周围flex-start 所有元素往主轴的起点靠flex-end 所有元素往主轴的终点靠center 所有元素往主轴的中间靠
align-items：stretch(默认) 把所有元素伸开，和最高的那个元素对齐flex-start 所有元素往侧轴的起点靠，不要伸开flex-end 所有元素往侧轴的终点靠，不要伸开center 所有元素往侧轴的中间靠，不要伸开
align-content：多行才有用，和justify-content用法差不多，只有一行的时候align-content没有任何效果。
flex item的属性
| 属性 | 含义 |
|---|---|
flex-grow | 增长比例(空间过多时) |
flex-shrink | 收缩比例(空间不够时) |
flex-basis | 默认大小(一般不用) |
flex | 上面三个的缩写 |
order | 顺序(代替双飞翼) |
align-self | 自身的对齐方式，可以让每个子元素有自己的对齐方式 |
常见的一些布局方式：
1、手机页面布局：上中下三栏，中间内容很多，高度自适应，上下高度固定。
<head>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
ul{
list-style:none;
}
.container{
height:100vh;
display:flex;
flex-direction:column;
}
header{
height: 100px;
background: #ddd;
}
footer ul{
height: 100px;
background: #ddd;
}
main{
flex-grow:1;
overflow:auto;
}
footer > ul{
display: flex;
}
footer > ul > li{
background: red;
width:25%;
height:100%;
border:1px solid black;
}
</style>
</head>
<body>
<div class="container">
<header>header</header>
<main>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
<p>段落</p>
</main>
<footer>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</footer>
</div>
</body>2、产品列表布局：
<head>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
ul{
list-style:none;
display: flex;
flex-wrap: wrap;
width:350px;
margin:auto;
border:1px solid black;
justify-content: space-between;
}
li{
width:100px;
height: 100px;
background:#ddd;
border:1px solid red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>3、简单的PC页面布局：
<head>
<style>
header{
height:50px;
background: #ddd;
}
footer{
height: 50px;
background: #ddd;
}
.content{
display:flex;
}
.content > aside{
width:120px;
background: #444;
}
.content > main{
height: 400px;
flex:1;
background: red;
}
.content > nav{
width:100px;
background:green;
}
</style>
</head>
<body>
<header>header</header>
<div class="content">
<aside id="aside1"></aside>
<main></main>
<nav></nav>
</div>
<footer>footer</footer>
</body>4、完美居中布局：
<head>
<style>
.parent{
height:400px;
background: #ddd;
display:flex;
justify-content:center;
align-items:center;
}
.child{
border:1px solid red;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
完美居中完美居中完美居中<br>
完美居中完美居中<br>
完美居中<br>
完美居中<br>
</div>
</div>
</body>最后
以上就是开朗狗为你收集整理的 Flex 布局常见的几种方式的全部内容，希望文章能够帮你解决 Flex 布局常见的几种方式所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复