圣杯布局几种方法,flex怎么布局

弹性盒1、盒1、弹性容器盒2、弹性元件盒3、弹性组元件垂直中央配置4、弹性布局实现导航栏5、固定百分比6、圣杯布局7、固定div

一、外壳1 .弹性容器外壳style.son { width: 60px； height: 60px； border : 1px固态硬盘； margin: 5px；盒尺寸： border-box；背景色： blanched almond； } .flex-direction、 align-content、 align-items、 flex-wrap、 flex-flow、 justify-content { width 33606066666666 背景色： gray； margin : 10px自动； }.flex-direction { flex-direction : row； }.flex-wrap { flex-wrap : nowrap； }.flex-flow { flex-flow : row wrap-reverse； }.justify-content { height :100 px； justify-content 3360 space-around； } .align-items { height: 100px； flex-flow: row wrap； align-items: baseline； }.align-content { height :300 px； flex-flow: row wrap；对齐内容：拉伸； (} /样式主体！ - flex-direction-- div class=' flex-direction ' divclass=' son '老板/div div class='son '老二/div div class='son

2 .弹性元素外壳style.son { width: 60px； height: 60px； border : 1px固态硬盘； margin: 5px；盒尺寸： border-box；背景色： blanched almond； }.order， flex-grow， flex-shrink， flex-basis， flex， align-self { width: 600px； height: 100px；显示： Flex； margin : 10px自动；背景色： gray； (/*:nth-child(n )选择器与属于父元素的第n个子元素匹配，而与元素类型无关。 *.orderdiv:nth-child(1)/*的值越小，数组越高，默认情况下为0(/)/*order: )； *.orderdiv:nth-child(2) { order: 10； }.orderdiv:nth-child(3) { order: -1； }.orderdiv:nth-child(4) { order: 5； }.orderdiv:nth-child(5) { order: 8； }.flex-growdiv { flex-grow: 1； }.flex-growdiv:nth-child(2) { flex-grow: 2； }.flex-shrink div { flex-shrink :1； }.flex-shrink div : nth-child (1) { flex-shrink: 0； }.flex-basis div : nth-child (2) { /* flex-basis的优先级为width */flex-

basis: 100px;}.flex>div { /* 等于flex-grow：1; */ flex: 1;}.align-self { height: 240px; align-items: flex-start;}.align-self>div:nth-child(2) { align-self: flex-end;}</style><body>  <div class="order"> <div class="son">老大</div> <div class="son">老二</div> <div class="son">ldxx</div> <div class="son">老四</div> <div class="son">老五</div> </div> </body>

3.flex设置元素垂直居中

父元素设置flex后，利用justify-content和align-items共同完成。

4.flex布局实现导航栏 <style> ul{ display: flex; } li{ flex: 1; text-align: center; line-height: 100px; background-color: #0069D9; list-style: none; font-size: 28px; }</style><body> <ul> <li>音乐</li> <li>影视</li> <li>旅游</li> </ul></body>

<body> <div class="demo"> <div class="left"></div> <div class="right"> <p>Iphone7 PLUS XXXXXXXXXX</p> <span>总人数99</span> <span>剩余人数33</span> <div class="btn">立即参与</div> </div> </div></body><style> .demo{ display: flex; justify-content: space-around; } .demo > div{ flex: none; /* flex: none = flex: 0 0 auto; 固定尺寸不伸缩*/ } .left{ width: 200px; height: 200px; background: #0069D9; } .right{ width: 380px; height: 200px; border: 1px solid red; }</style>

5.固定百分比布局

主要是使用flex属性中flex-basis固定大小

<body><div class="demo"> <div class="item item1"></div> <div class="item item2"></div> <div class="item item3"></div> <div class="item item4"></div></div></body><style type="text/css">.demo{ display: flex; background-color: pink ; } /*1.等分布局*/ .item{ flex: 1; } .item1,.item2,.item3,.item4{ border:1px solid red ; background-color: greenyellow; margin:5px ; } /*2.某一个固定*/ .item{ flex: 1; background-color: greenyellow; margin: 5px; border: 1px solid green; } .item2{ flex: 0 0 50%;/* item2占主轴的50% */ } /*3.多个固定*/ .item{ flex: 1; background-color: greenyellow; border: 1px solid #ADFF2F; margin: 5px; } .item2{ flex: 0 0 50%; } .item4{flex: 0 0 20%; } </style>

6.圣杯布局 <style> .demo{ display: flex; flex-direction: column; text-align: center;font-size: 25px;} .demo div{ flex: 1;} .body{ display: flex; } .header,.footer,.left,.right{ flex: 0 0 20% !important; } .header,.footer{background-color: dimgray;}.left{background-color: lightgray;}.center{background-color: greenyellow;}.right{background-color: lightpink;}.left,.center,.right{height: 300px;}.header{height: 100px;}</style><body> <div class="demo"> <div class="header">头部</div> <div class="body"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div> </div> <div class="footer">底部</div> </div></body>

7.固定div在底部 <body> <div class="demo"> <div class="main">这是主要内容</div> <div class="footer">这是底部</div> </div></body><style>*{padding: 0;margin: 0;} .demo{ display: flex; flex-direction: column; height: 100%; /* 重点1 */ } /* 重点2：不能缺少对于html,body高度的设置。一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度。块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。如果不写，就会出现下图，不确定的话可以加入一张图片试验。*/ html,body{ height: 100%; } .main{ flex: 1; } .footer{ width: 100%; height: 120px;background-color: black;color:white; } </style>

最终实现