#一 布局几种方式
1.静态(自然)布局(没有任何(float,position等)修饰的布局)
2.浮动布局(float)
3.定位布局(position)
4.弹性布局(flex)
5.栅格布局(就是把网页的宽度分成固定的相同宽度,然后列出各种可能的组合,以便页面在进行呈现时能够进行快速的布局,通常12等分或24等分)
#弹性布局
概念:是CSS3的弹性盒子(Flexible Box)或FlexBox,是一种布局方式,当页面需要适应不同屏幕大小或设备类型时,他会确保拥有恰当的布局方式.
#原理
弹性布局是通过调整其内元素的宽高,从而在任何显示设备对可用的显示空间的最佳填充能力.
#名称解释
##轴(Axis)
每个弹性框布局都包含两个轴,弹性项目(子级元素)延其依次排列的的水平轴称之为主轴(水平线),
垂直于主轴的称之为侧重(垂直线)
#尺寸(Dimension)
根据弹性容器的主轴侧轴,弹性项目的宽高,对应的主轴的称之为主轴尺寸(宽),对应侧轴的称之为侧轴尺寸(高)
#定义一个弹性布局
display:flex;
值flex使弹性容器成为一个块级元素,定义在父级上
display:inline-flex;
值inline-flex使弹性容器成为行内元素.定义在父级上.
display:none;
注意:使用弹性布局后,子元素的float,clear和vertical-align将失效.
#flex属性分类
##1.容器属性(作用于父级上)
###a.flex-direction
这个属性决定了主轴(水平)的方向(项目的排列方向)
###b.flex-wrap
默认情况下,项目排在一行,可以通过这个属性设置来决定子级元素是否换行显示
###c.flex-flow
该属性是flex-direction和flex-wrap属性的简写
###d.justity-content
定义了项目(子级)在主轴(水平)方向上的对齐方式
###e.align-items
定义了项目(子级元素)在交叉轴上的对齐方式
###f.align-content
定义了多根轴的对齐方式,如果只有一根轴线该属性不起作用
##2.项目(子级)属性(属性写在子级元素上)
###a.order
定义了项目(子级)的排列顺序,数值越小排列越前,值可正可负
###b.flex-grow
定义了项目(子级元素)的放大比例,默认是0,如果空间不够,该项目不放大
###c.flex-shrink
定义了项目的缩小比例,默认1,如果空间不够,该项目自动缩小.
###d.flex-basis
该属性会计算主轴是否有多余空间
###e.flex
是flex-grow,flex-shrink和flex-basis的简写,也就是他们的复合写法
###f.align-self
该属性允许单个项目有与其他项目不一样的对齐方式,默认值auto,表示父级元素的align-items属性,没如果没有父级,则等同于stretch
#具体演示
一 容器属性flex-direction属性演示
###HTML代码
<pre>
flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
</pre>
<h1>flex-direction: row</h1>
<ul id="box1" class="box1">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<h1>flex-direction: row-reverse</h1>
<ul id="box2" class="box1">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<h1>flex-direction: column</h1>
<ul id="box3" class="box1">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<h1>flex-direction: column-reverse</h1>
<ul id="box4" class="box1">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
##CSS样式
.box1{
display: flex;
}
.box1 li{
width: 100px;
height: 100px;
border: 2px solid red;
text-align: center;
list-style: none;
}
#box1{
flex-direction: row;
}
#box2{
flex-direction: row-reverse;
}
#box3{
flex-direction: column;
}
#box4{
flex-direction: column-reverse;
}
#未完待续…