CSS Flex布局
Wscats opened this issue · comments
样式如下
用flex和百分比同样做响应式布局，效果一样，但是方法不一样
传统布局方法一般是基于盒状模型的，通过display属性,position属性和float属性达到目的。它这对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
这里header相当于一个flex的盒模型，里面的div根据这个盒做相应的改变
body {
margin: 0;
padding: 0;
}
/*flex方法*/
.header {
display: flex;
/*设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。*/
flex-direction: row;
background-color: #c5c5c5;
width: 100%;
}
.header div {
text-align: center;
flex: 1;
}
/*百分比方法*/
.headerPer{
background-color: #c5c5c5;
width: 100%;
float: left;
}
.headerPer div{
float: left;
width: 25%;
text-align: center;
}
</style>
<body>
<header class="header">
<div>左边</div>
<div>中间</div>
<div>中间</div>
<div>右边</div>
</header>
<header class="headerPer">
<div>左边</div>
<div>中间</div>
<div>中间</div>
<div>右边</div>
</header>
</body>
上面flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间。比如上面就把每个div分成四个1，每个占四份之一
flex设置为1就是默认设置flex-grow，flex-shrink和flex-basis属性值
- flex-grow 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
- flex-shrink 一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
- flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
flex-basis属性用于设置或检索弹性盒伸缩基准值
注意：如果元素不是弹性盒对象的元素，则 flex-basis 属性不起作用
如果用JS写的话就用这种
注意：display: box; 是 2009版本. display: flex;是2011修订版
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
我们可以对header盒子增加一个
flex-direction: row-reverse;
他可以有以下的值
- row（默认值）：主轴为水平方向，起点在左端。
- row-reverse：主轴为水平方向，起点在右端。
- column：主轴为垂直方向，起点在上沿。
- column-reverse：主轴为垂直方向，起点在下沿。
flex-direction:initial;设置默认值为row
flex-direction:inherit;从父元素继承该属性
参考：Flex 布局教程：实例篇
参考：Wsscat的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
section {
display: flex;
width: 120px;
height: 120px;
background-color: antiquewhite;
}
section span:nth-of-type(1) {
border-radius: 10px;
display: block;
width: 32px;
height: 32px;
margin: 4px;
background-color: black;
align-self:center;
}
section span:nth-of-type(2) {
border-radius: 10px;
display: block;
width: 32px;
height: 32px;
margin: 4px;
background-color: black;
align-self:center;
}
</style>
<body>
<section>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</section>
</body>
</html>
写了个比较全的DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title>Wsscat的flex布局DEMO</title>
</head>
<style>
/*display: box; 是 2009版本. display: flex;是2011修订版*/
/*初始化*/
* {
margin: 0;
padding: 0;
}
/*设置了box属性 321*/
.article1 {
width: 600px;
height: 200px;
display: -moz-box;
display: -webkit-box;
display: box;
}
.sectionOne {
background: orange;
-moz-box-flex: 3;
-webkit-box-flex: 3;
box-flex: 3;
}
.sectionTwo {
background: purple;
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
}
.sectionThree {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
background: green;
}
/*不设置flex属性*/
.article2 section:nth-of-type(1) {
background: orange;
/*因为父元素没有设置 display: box;属性，所以不生效
在这里就白白设置了
* */
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
}
.article2 section:nth-of-type(2) {
background: purple;
}
.article2 section:nth-of-type(3) {
background: green;
}
/*设置的flex属性 321*/
.article3 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.article3 section:nth-of-type(1) {
background: orange;
flex: 3;
}
.article3 section:nth-of-type(2) {
background: purple;
flex: 2;
}
.article3 section:nth-of-type(3) {
background: green;
flex: 1;
}
/*用百分比*/
.article4 {
width: 600px;
height: 200px;
float: left;
}
.article4 section:nth-of-type(1) {
height: 200px;
background: orange;
/*3:6*/
width: 50%;
float: left;
}
.article4 section:nth-of-type(2) {
height: 200px;
background: purple;
/*2:6*/
width: 33.3%;
float: left;
}
.article4 section:nth-of-type(3) {
height: 200px;
background: green;
/*1:6*/
width: 16.6%;
float: left;
}
.article5 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
.article5 section:nth-of-type(1) {
background: orange;
width: 50%;
/*变成了42.9%*/
}
.article5 section:nth-of-type(2) {
background: purple;
width: 33.3%;
/*变成了28.56*/
}
.article5 section:nth-of-type(3) {
background: green;
width: 33.3%;
/*变成了28.56*/
/*超出了16.6%*/
/*然后对超出的这16.6做一个分配;*/
/*16.6*(50%/116%) = 7.1;*/
/*16.6*(33.3%/116%) = 4.74;*/
}
.article6 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: row-reverse;
}
.article6 section:nth-of-type(1) {
background: orange;
flex: 3;
}
.article6 section:nth-of-type(2) {
background: purple;
flex: 2;
}
.article6 section:nth-of-type(3) {
background: green;
flex: 1;
}
.article7 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.article7 section:nth-of-type(1) {
background: orange;
flex: 3;
}
.article7 section:nth-of-type(2) {
background: purple;
flex: 2;
}
.article7 section:nth-of-type(3) {
background: green;
flex: 1;
}
.article8 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-direction: column-reverse;
}
.article8 section:nth-of-type(1) {
background: orange;
flex: 3;
}
.article8 section:nth-of-type(2) {
background: purple;
flex: 2;
}
.article8 section:nth-of-type(3) {
background: green;
flex: 1;
}
.article9 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.article9 section:nth-of-type(1) {
background: orange;
width: 300px;
}
.article9 section:nth-of-type(2) {
background: purple;
width: 200px;
}
.article9 section:nth-of-type(3) {
background: green;
width: 200px;
}
.article10 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap-reverse;
}
.article10 section:nth-of-type(1) {
background: orange;
width: 300px;
}
.article10 section:nth-of-type(2) {
background: purple;
width: 200px;
}
.article10 section:nth-of-type(3) {
background: green;
width: 200px;
}
.article11 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-flow: column wrap-reverse;
}
.article11 section:nth-of-type(1) {
background: orange;
flex: 3;
}
.article11 section:nth-of-type(2) {
background: purple;
flex: 2;
}
.article11 section:nth-of-type(3) {
background: green;
flex: 1;
}
.article12 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
justify-content: flex-end;
}
.article12 section:nth-of-type(1) {
background: orange;
width: 100px;
}
.article12 section:nth-of-type(2) {
background: purple;
width: 100px;
}
.article12 section:nth-of-type(3) {
background: green;
width: 100px;
}
.article13 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
justify-content: center;
}
.article13 section:nth-of-type(1) {
background: orange;
width: 100px;
}
.article13 section:nth-of-type(2) {
background: purple;
width: 100px;
}
.article13 section:nth-of-type(3) {
background: green;
width: 100px;
}
.article14 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.article14 section:nth-of-type(1) {
background: orange;
width: 100px;
}
.article14 section:nth-of-type(2) {
background: purple;
width: 100px;
}
.article14 section:nth-of-type(3) {
background: green;
width: 100px;
}
.article15 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
justify-content: space-around;
}
.article15 section:nth-of-type(1) {
background: orange;
width: 100px;
}
.article15 section:nth-of-type(2) {
background: purple;
width: 100px;
}
.article15 section:nth-of-type(3) {
background: green;
width: 100px;
}
.article16 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
align-content: center;
background-color: #D7D7D7;
}
.article16 section:nth-of-type(1) {
background: orange;
width: 300px;
height: 50px;
}
.article16 section:nth-of-type(2) {
background: purple;
width: 200px;
height: 50px;
}
.article16 section:nth-of-type(3) {
background: green;
width: 200px;
height: 50px;
}
.article17 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
align-items:flex-end;
background-color: #D7D7D7;
}
.article17 section:nth-of-type(1) {
background: orange;
width: 300px;
height: 50px;
}
.article17 section:nth-of-type(2) {
background: purple;
width: 200px;
height: 50px;
}
.article17 section:nth-of-type(3) {
background: green;
width: 100px;
height: 50px;
}
.article18 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
align-items:center;
background-color: #D7D7D7;
}
.article18 section:nth-of-type(1) {
background: orange;
width: 300px;
height: 50px;
}
.article18 section:nth-of-type(2) {
background: purple;
width: 200px;
height: 50px;
}
.article18 section:nth-of-type(3) {
background: green;
width: 100px;
height: 50px;
}
.article19 {
width: 600px;
height: 200px;
display: -moz-flex;
display: -webkit-flex;
display: flex;
background-color: #D7D7D7;
}
.article19 section:nth-of-type(1) {
background: orange;
width: 300px;
height: 50px;
align-self:center;
}
.article19 section:nth-of-type(2) {
background: purple;
width: 200px;
height: 50px;
align-self:flex-end;
}
.article19 section:nth-of-type(3) {
background: green;
width: 100px;
height: 50px;
align-self:flex-start;
}
</style>
<body>
<!--设置display: box;-->
<p>设置display: box</p>
<article class="article1">
<section class="sectionOne">1</section>
<section class="sectionTwo">2</section>
<section class="sectionThree">3</section>
</article>
<!--不设置 display: box;-->
<p>不设置 display: box;</p>
<article class="article2">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<!--设置display: flex;-->
<p>设置display: flex;</p>
<article class="article3">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<!--用百分比-->
<p>用百分比</p>
<p>细心的会发现我们右边还有大概0.01%的宽度没有填充（由于是100不能完全等分三分），这就是使用百分比不好的一种表现</p>
<article class="article4">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<!--用百分比结合flex-->
<p style="float: left;">用百分比结合flex(溢出情况)</p>
<p>事实上这里可以不对父元素写display:flex</p>
<article class="article5">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;它默认是flex-direction:row，现在设置成flex-direction:row-reverse</p>
<article class="article6">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;它默认是flex-direction:row，现在设置成flex-direction:column</p>
<article class="article7">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;它默认是flex-direction:row，现在设置成flex-direction:column-reverse</p>
<article class="article8">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;固定值溢出的情况;它默认是flex-wrap:nowrap，现在设置成wrap</p>
<article class="article9">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;固定值溢出的情况;它默认是flex-wrap:nowrap，现在设置成wrap-reverse</p>
<article class="article10">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;固定值溢出的情况;它默认是flex-flow:row nowrap，其实就是flex-direction和flex-wrap合并在一起写，现在设置成colum wrap-reverse</p>
<article class="article11">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:flex-end</p>
<article class="article12">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:center</p>
<article class="article13">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:space-between</p>
<article class="article14">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;不溢出的情况;它默认是justify-content:flex-start,现在设置成justify-content:space-around</p>
<article class="article15">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;宽度溢出的情况;高度不溢出并上下有空余部分;它默认是align-content:flex-start,现在设置成align-content:flex-start;注意：这属性在只有一行的伸缩容器上没有效果</p>
<article class="article16">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;宽度不溢出的情况;高度不溢出并上下有空余部分;它默认是align-items:flex-start,现在设置成align-items:flex-end;注意：这属性在一行的伸缩容器上是有效果的</p>
<article class="article17">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>设置display: flex;宽度不溢出的情况;高度不溢出并上下有空余部分;它默认是align-items:flex-start,现在设置成align-items:center;注意：这属性在一行的伸缩容器上是有效果的</p>
<article class="article18">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
<p>定义flex子项单独在侧轴（纵轴）方向上的对齐方式,意思就是之前我们定义的位置都是针对父元素article来写定位样式，但align-self却可以对子元素section进行单独的定位</p>
<article class="article19">
<section>1</section>
<section>2</section>
<section>3</section>
</article>
</body>
</html>