当前位置：网站首页>flex布局总结
flex布局总结
2022-08-09 14:54:00 【小羊卷】
（一）flex前置知识点
1.写在父盒子身上的属性
1.display：flex （声明，将这个盒子设置flex属性，变成flex容器，那么里面的子盒子就是容器成员，通过以下属性可以控制子盒子的排列）
2.主轴？侧轴？
父盒子成为容器后，里面的子盒子会在主轴上排列，默认x轴为主轴，即
flex-direction：row（默认）
要想让子盒子竖着排列，那就需要把轴转换成y轴
flex-direction：column（列）
有主轴就有侧轴，如果横着的x轴是主轴，那么竖着的y轴就是侧轴，反之，y轴是主轴，x轴是侧轴。
3.下面的属性是控制子盒子在主轴上的排列方式
justify-content：flex-start （默认）/ flex-end（倒着排列） / center（居中排列） / space-between（左右/上下贴边，其他的间隔相同） / space-around （平均分配父盒子剩余宽度）
*** 假如父盒子宽度为800px 子盒子默认在主轴x轴上排列，子盒子的宽度为200px 那么4个子盒子就可以填满父盒子的宽度。
如果此时，再增加子盒子的数量，子盒子是否会换行？
答：子盒子不会换行 会强制缩小子盒子的宽度，使他们依旧在一行中显示
4.依据上面的问题引出如果换行？
flex-wrap：nowrap（默认不换行） 设置为 flex-wrap：wrap（换行）
5.想要控制子盒子水平垂直居中？（以下所有都默认主轴为x轴）
操作方法：主轴方向垂直居中 （justify-content：center）
？？？
第二步？ 如何让他垂直也居中呢？
改变主轴方向？
不！ 始终逃不出侧轴
6.控制子盒子在侧轴排列的属性（以下分为单行和多行 ， 会有稍许不同）
align-items：center /flex-start /flex-end / stretch（拉伸盒子高度） 解释不多赘述，就最后一个是拉伸长度，可以不用考虑，常用就是center
7.多行侧轴属性
align-content：flex-start （默认）/ flex-end（倒着排列） / center（居中排列） / space-between（左右/上下贴边，其他的间隔相同） / space-around （平均分配父盒子剩余宽度）/ stretch（拉伸）
2.写在子盒子身上的属性
1.flex：数值/百分比
解释：占据父盒子的份数 下列案例：分别指定flex： 1 flex ：2 flex：3 会发现他们的宽度是不一样大的，相当于把父盒子的宽度平均的分成了（1+2+3）6份。
flex ：1 说明占父盒子宽度的 1/6 flex ： 2 说明占父盒子宽度的 2 /6 flex ：3 说明占父盒子宽度的 3/6；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
width: 80%;
height: 500px;
background-color: pink;
}
span {
height: 100px;
/* background-color: blue; */
}
.one {
flex: 2;
background-color: blue;
}
.two {
flex: 3;
background-color: skyblue;
}
.three {
flex: 1;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<span class="one"></span>
<span class="two"></span>
<span class="three"></span>
</div>
</body>
</html>
2.order （排序）
没什么卵用 改变子盒子的排列顺序 默认从0 开始
假设我们想要让第二个盒子在不改变html结构的前提下，排在第一个盒子前面，那么只需要给第二个盒子 设置orde：-1即可！
所以：子盒子排列顺序，是按照从小到大排列的，order就是改变他们的序号。
3.align-self （子盒子自己的排列方式） 几乎用不到
注意要区分开 align-items 使用在父盒子上的排列 是针对所有的子盒子，而写在子盒子上的 align-self只针对自身。
属性：
align-self： flex-end / flex-start / center / stretch
*以上就是所有的学习flex的基础知识
（二）布局！
学了就要用，接下来讲解flex布局案例 携程网！！！
1.准备工作：建立文件夹 (任何一种布局都是如此，所以要习惯)
css 放置 normalize.css index.css
index.html 主页
images 存放不常更换的图片，比如精灵图，logo等
uploads 存放产品类图片
2.首页引入基础样式 设置视口标签 （* normalize.css一定要在index.css前面，方便我们自身设置的样式覆盖初始化样式）
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">3.设置body样式
要求：最大最小宽度 居中显示 设置字体 字号 行高 主页的背景颜色等 以及取消手指点击出现高亮效果 取消页面滚动条等（ps：都是携程网站上写出来的）
body {
/*这一段是复制粘贴的携程官网的body初始化*/
color: #000;
/* 取消页面横向滚动条 */
overflow-x: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* */
-webkit-text-size-adjust: none;
/* -moz-user-select: none; */
max-width: 540px;
width: 100%;
min-width: 320px;
margin: 0 auto;
background: #f4f4f4;
/* 英文字体中间有空格的要用引号包裹起来 */
font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, ' Microsoft Yahei', STXihei, hei;
}4.页面分析及代码书写
以下为携程网代码块 要点在于nav部分的书写，使用两种方法，明显没有注释的要比注释掉的结构更加清晰。
html结构代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 顶部搜索 -->
<div class="header-index">
<div class="search">
搜索:目的地/酒店/景点/航班号
</div>
<a href="#">我 的</a>
</div>
<!-- 焦点图模块 -->
<div class="banner-index">
<img src="./upload/focus.jpg" alt="">
</div>
<!-- 局部导航栏模块 -->
<ul class="local-nav">
<li>
<a href="#" title="景点·玩乐">
<span class="ico"></span>
景点·玩乐
</a>
</li>
<li>
<a href="#" title="景点·玩乐">
<span class="ico"></span>
景点·玩乐
</a>
</li>
<li>
<a href="#" title="景点·玩乐">
<span class="ico"></span>
景点·玩乐
</a>
</li>
<li>
<a href="#" title="景点·玩乐">
<span class="ico"></span>
景点·玩乐
</a>
</li>
<li>
<a href="#" title="景点·玩乐">
<span class="ico"></span>
景点·玩乐
</a>
</li>
</ul>
<!-- 大导航栏模块 -->
<!-- <div class="nav-box">
<ul class="nav">
<li><a href="#">
<span>海外酒店</span>
</a></li>
<li><a href="#">
<span>海外酒店</span>
<span>特价酒店</span>
</a></li>
<li><a href="#">
<span>海外酒店</span>
<span>特价酒店</span>
</a></li>
</ul>
<ul class="nav">
<li><a href="#">
<span>海外酒店</span>
</a></li>
<li><a href="#">
<span>海外酒店</span>
<span>特价酒店</span>
</a></li>
<li><a href="#">
<span>海外酒店</span>
<span>特价酒店</span>
</a></li>
</ul>
<ul class="nav">
<li><a href="#">
<span>海外酒店</span>
</a></li>
<li><a href="#">
<span>海外酒店</span>
<span>特价酒店</span>
</a></li>
<li><a href="#">
<span>海外酒店</span>
<span>特价酒店</span>
</a></li>
</ul>
</div> -->
<div class="nav">
<div class="nav-content">
<div class="nav-hot">
<a href="#">海外酒店</a>
</div>
<div class="nav-hot">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="nav-hot">
<a href="#">团购</a>
<a href="#">民宿·客栈</a>
</div>
</div>
<div class="nav-content">
<div class="nav-hot">
<a href="#">机票</a>
</div>
<div class="nav-hot">
<a href="#">火车票</a>
<a href="#">特价机票</a>
</div>
<div class="nav-hot">
<a href="#">汽车票·船票</a>
<a href="#">专车·租车</a>
</div>
</div>
<div class="nav-content">
<div class="nav-hot">
<a href="#">旅游</a>
</div>
<div class="nav-hot">
<a href="#">门票</a>
<a href="#">目的地攻略</a>
</div>
<div class="nav-hot">
<a href="#">邮轮旅行</a>
<a href="#">定制旅行</a>
</div>
</div>
</div>
<!-- nav-link模块 -->
<div class="nav-link">
<a href="#">
<span class="ico-w"></span>
电话费</a>
<a href="#">
<span class="ico-w"></span>
外币兑换</a>
<a href="#">
<span class="ico-w"></span>
购物</a>
<a href="#">
<span class="ico-w"></span>
当地向导</a>
<a href="#">
<span class="ico-w"></span>
自由行</a>
<a href="#">
<span class="ico-w"></span>
境外玩乐</a>
<a href="#">
<span class="ico-w"></span>
信用卡</a>
<a href="#">
<span class="ico-w"></span>
更多</a>
<a href="#">
<span class="ico-w"></span>
保险</a>
<a href="#">
<span class="ico-w"></span>
信用卡</a>
</div>
<!-- 热门活动模块 -->
<div class="active-index">
<div class="active-top">
<span class="hot"></span>
<span class="welfare">获取更多福利 ></span>
</div>
<div class="active-bd">
<span class="bd-left">
<img src="./upload/pic1.jpg" alt="">
</span>
<span class="bd-right">
<img src="./upload/pic2.jpg" alt="">
</span>
</div>
<div class="active-bd">
<span class="bd-left">
<img src="./upload/pic3.jpg" alt="">
</span>
<span class="bd-right">
<img src="./upload/pic4.jpg" alt="">
</span>
</div>
<div class="active-bd">
<span class="bd-left">
<img src="./upload/pic5.jpg" alt="">
</span>
<span class="bd-right">
<img src="./upload/pic6.jpg" alt="">
</span>
</div>
</div>
<!-- 底部模块 -->
<footer>
<a href="#">
<span class="footico"></span>
电话预定
</a>
<a href="#">
<span class="footico"></span>
下载客户端
</a>
<a href="#">
<span class="footico"></span>
我的
</a>
</footer>
<div class="footer-link">
<p>
<a href="#">网站地图</a>
<a href="#">@language</a>
<a href="#">电脑版</a>
</p>
<p>
<a href="#">@2018携程旅行</a>
<a href="#">8535863</a>
</p>
</div>
</body>
</html>css代码
body {
/*这一段是复制粘贴的携程官网的body初始化*/
color: #000;
/* 取消页面横向滚动条 */
overflow-x: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/* */
-webkit-text-size-adjust: none;
/* -moz-user-select: none; */
max-width: 540px;
width: 100%;
min-width: 320px;
margin: 0 auto;
background: #f4f4f4;
/* 英文字体中间有空格的要用引号包裹起来 */
font: normal 14px/1.5 PingFangSC-regular, Tahoma, Lucida Grande, Verdana, ' Microsoft Yahei', STXihei, hei;
}
a {
text-decoration: none;
color: #333;
}
img {
vertical-align: middle;
/* 去掉插入的图片的默认边框 */
border: 0;
outline: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
/* 顶部搜索 */
.header-index {
position: fixed;
width: 100%;
max-width: 540px;
min-width: 320px;
display: flex;
height: 44px;
background-color: #F6F6F6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.search {
position: relative;
flex: 1;
height: 26px;
margin: 7px 10px;
/* background-color: blue; */
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
font-size: 12px;
color: #666;
padding-left: 25px;
line-height: 26px;
}
.search::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 15px;
height: 15px;
background: url(../images/sprite.png) no-repeat -59px -279px;
background-size: 104px auto;
}
.header-index a {
width: 44px;
height: 44px;
/* background-color: pink; */
font-size: 12px;
text-align: center;
color: #2eaae0;
}
.header-index a::before {
content: "";
display: block;
width: 23px;
height: 23px;
background: url(../images/sprite.png) no-repeat -58px -192px;
background-size: 103px auto;
margin: 3px auto 0px;
}
/* 焦点图模块 */
.banner-index {
padding-top: 45px;
}
.banner-index img {
width: 100%;
}
/* 局部导航栏模块 */
.local-nav {
display: flex;
height: 64px;
background-color: #fff;
margin: 5px;
border-radius: 8px;
}
.local-nav li {
flex: 1;
}
.local-nav li a {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 5px;
font-size: 12px;
}
.ico {
width: 32px;
height: 32px;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 32px auto;
margin-bottom: 3px;
}
.local-nav li:nth-child(2) a .ico {
background-position: 0 -32px;
}
.local-nav li:nth-child(3) a .ico {
background-position: 0 -64px;
}
.local-nav li:nth-child(4) a .ico {
background-position: 0 -96px;
}
.local-nav li:nth-child(5) a .ico {
background-position: 0 -128px;
}
/* 大导航栏模块 */
/* .nav {
display: flex;
height: 2.3467rem;
margin: 0 .1333rem;
margin-bottom: .1333rem;
border-radius: .2133rem;
background: -webkit-linear-gradient(left, #FA5A55, #FA994D);
}
.nav li {
flex: 1;
}
.nav li a {
display: flex;
flex-direction: column;
align-items: center;
height: 2.3467rem;
}
.nav li:nth-child(-n+2) a {
border-right: .0267rem solid #fff;
}
.nav li a span {
flex: 1;
line-height: 1.1733rem;
width: 100%;
text-align: center;
color: #fff;
font-size: .3733rem;
text-shadow: .0267rem .0267rem #000;
}
.nav li:first-child a span {
background: url(../images/hotel.png) no-repeat bottom;
background-size: 3.2267rem auto;
}
.nav li:nth-child(n+2) a span:first-child {
border-bottom: .0267rem solid #fff;
}
.nav-box .nav:nth-child(2) {
background: -webkit-linear-gradient(left, #4B90ED, #53BCED);
}
.nav-box .nav:nth-child(3) {
background: -webkit-linear-gradient(left, #34C2A9, #6CD559);
}*/
/* 方法二 */
.nav {
margin: 0 5px;
border-radius: 8px;
overflow: hidden;
background-color: #fff;
}
.nav-content {
display: flex;
height: 88px;
background: -webkit-linear-gradient(left, #fa5c55, #fa984e)
}
.nav-content:nth-child(2) {
margin: 3px 0;
background: -webkit-linear-gradient(left, #4b91ed, #53bced);
}
.nav-content:nth-child(3) {
background: -webkit-linear-gradient(left, #34c2a8, #6bd45a);
}
.nav-hot {
display: flex;
flex-direction: column;
flex: 1;
height: 88px;
}
.nav-hot:nth-child(-n+2) {
border-right: 1px solid #fff;
}
.nav-hot:first-child a {
background: url(../images/hotel.png) no-repeat bottom;
background-size: 121px auto;
}
.nav .nav-content:nth-child(2) .nav-hot:nth-child(1) a {
background: url(../images/sprite.png) no-repeat 50px -591px;
background-size: 217px auto;
}
.nav .nav-content:nth-child(3) .nav-hot:nth-child(1) a {
background: url(../images/sprite.png) no-repeat 50px -377px;
background-size: 217px auto;
}
.nav-hot a {
flex: 1;
text-align: center;
line-height: 44px;
color: #fff;
text-shadow: 1px 1px #000;
font-size: 14px;
}
.nav-hot a:first-child {
border-bottom: 1px solid #fff;
}
/* nav-link模块 */
.nav-link {
display: flex;
flex-wrap: wrap;
/* height: 116px; */
background: #fff;
margin: 5px;
border-radius: 8px;
padding: 8px 0px;
}
.nav-link a {
flex: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
.nav-link a span {
width: 28px;
height: 28px;
background: url(../images/subnav-bg.png) no-repeat 0 0;
background-size: 28px auto;
}
.nav-link a:nth-child(2) span {
background-position: 4px -29px;
}
.nav-link a:nth-child(3) span {
background-position: 4px -63px;
}
.nav-link a:nth-child(4) span {
background-position: 0px -96px;
}
.nav-link a:nth-child(5) span {
background-position: 0px -127px;
}
.nav-link a:nth-child(6) span {
background-position: 5px -163px;
}
.nav-link a:nth-child(7) span {
background-position: 2px -198px;
}
.nav-link a:nth-child(8) span {
background-position: 2px -229px;
}
.nav-link a:nth-child(9) span {
background-position: 2px -256px;
}
.nav-link a:nth-child(10) span {
background-position: 4px -286px;
}
.nav-link a:nth-child(-n+5) {
margin-bottom: 8px;
}
/* 热门活动模块 */
.active-index {
background-color: #fff;
margin: 0 5px;
}
.active-top {
display: flex;
justify-content: space-between;
padding-top: 10px;
padding-bottom: 10px;
border-top: 1px solid #ccc;
}
.hot {
width: 79px;
height: 15px;
background: url(../images/hot.png) no-repeat 0px -19px;
background-size: 79px auto;
margin-left: 10px;
margin-top: 5px;
}
.welfare {
padding: 2px 20px;
background: -webkit-linear-gradient(left, #FF506C, #FF6BC6);
border-radius: 20px;
font-size: 14px;
color: #fff;
margin-right: 5px;
}
.active-bd {
display: flex;
border-top: 1px solid #ccc;
}
.bd-right {
flex: 1;
}
.bd-left {
flex: 1;
border-right: 1px solid #ccc;
}
.bd-left img {
width: 100%;
}
.bd-right img {
width: 100%;
}
/* 底部模块 */
footer {
display: flex;
height: 50px;
background-color: #fff;
margin: 8px 5px 5px;
}
footer a {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.footico {
width: 18px;
height: 18px;
background: url(../images/sprite.png) no-repeat -59px -152px;
background-size: 104px auto;
margin: 5px 0;
}
footer a:nth-child(2) .footico {
background-position: -59px -172px;
}
footer a:nth-child(3) .footico {
background-position: -60px -310px;
}
/* .footer-link */
.footer-link {
text-align: center;
font-size: 12px;
}
.footer-link p:first-child a:nth-child(2) {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 0 5px;
}
.footer-link p:first-child {
margin-bottom: 3px;
}
.footer-link p:last-child a {
color: #ccc;
}
.footer-link p:last-child a:first-child {
border-right: 1px solid #ccc;
padding-right: 5px;
}补充最后一个要点：fixed 固定定位 固定定位一定要给宽度 而且在移动端布局，一定要给最大和最小宽度，固定定位以浏览器可视区域定位 不限制宽度会直接变得很长。
第二：我代码中没有给top和left 建议不写，但是如果写，一定要left：50% ； transform：translate（-50%）；
这样才能让盒子固定在屏幕正中央！
这是我书写完成后展示的页面
边栏推荐
猜你喜欢
Arduino 飞鼠 空中鼠标 陀螺仪体感鼠标
正则化原理的简单分析(L1/L2正则化)
双摄像头系列原理深度剖析【转载】
Inverted order at the beginning of the C language 】 【 string (type I like Beijing. Output Beijing. Like I)
个人域名备案详细流程（图文并茂）
怎么用VS+Qt创建新项目
Introduction to OpenCV and build the environment
爱因斯坦的光子理论
It is deeply recognized that the compiler can cause differences in the compilation results
ASP.Net Core实战——初识.NetCore
随机推荐
运算符学习
抢占量化交易基金产品先机，量化投资有发展空间？
WebGL：BabylonJS入门——初探：我的世界
What is an index in MySql?What kinds of indexes are commonly used?When does an index fail?
stream去重相同属性对象
英语议论文读写01 Business and Economics
量化程序化交易都有哪些热点争议？
[MySql] implement multi-table query - one-to-one, one-to-many
encapsulation of strlen(), strcpy(), strncpy(), strcat(), strncat(), strcmp(), strncmp() functions
Servlet life cycle
How to make your quantitative trading system have probabilistic advantages and positive return expectations?
Use tensorboard remotely on the server
欢迎使用CSDN-markdown编辑器
CV复习：过拟合、欠拟合
对程序化交易系统接口有什么误区？
量化投资者是如何获取实时行情数据的呢？
How to achieve long-term benefits through the Tongdaxin quantitative trading interface?
对于程序化交易，重在预测还是重在对策呢？
[MySql]实现多表查询-一对一，一对多
是什么推动了量化交易接口的发展？