当前位置：网站首页>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%）；
这样才能让盒子固定在屏幕正中央！
这是我书写完成后展示的页面
边栏推荐
猜你喜欢
pytorch从零搭建神经网络实现多分类(训练自己的数据集)
几何光学简介
【小白必看】初始C语言(上)
突然想分析下房贷利率及利息计算
What is a template engine?What are the common template engines?Introduction to common commands of thymeleaf.
6大论坛，30+技术干货议题，2022首届阿里巴巴开源开放周来了！
【C语言初阶】详解分支语句
.Net Core后台任务启停（BackgroundService）
More than pytorch from zero to build neural network to realize classification (training data sets)
stream去重相同属性对象
随机推荐
Welcome to use CSDN - markdown editor
如何让你的量化交易系统具有概率优势，具有正向收益预期呢？
在量化交易过程中，散户可以这样做
如何灵活运用量化交易接口的优势取长补短？
LNK1123: Failed during transition to COFF: invalid or corrupt file
在服务器上远程使用tensorboard
是什么推动了量化交易接口的发展？
记一次解决Mysql：Incorrect string value: ‘\xF0\x9F\x8D\x83\xF0\x9F...‘ for column 插入emoji表情报错问题
Qt control - QTextEdit usage record
SNR 信噪比
【C语言初阶】求最小公倍数的三种方法
小型项目如何使用异步任务管理器实现不同业务间的解耦
正则化原理的简单分析(L1/L2正则化)
Sort method (Hill, Quick, Heap)
Simply record offsetof and container_of
跨平台桌面应用 Electron 尝试（VS2019）
C写菜单指令的快捷方法
How can I know if quantitative programmatic trading is effective?
用户如何正确去认识程序化交易？
How to achieve long-term benefits through the Tongdaxin quantitative trading interface?