First, the elastic box appreciated
CSS3 elastic box is a new layout patterns.
CSS3 elastic box ( Flexible Box or flexbox time), when the page is a need to adapt to different screen sizes and device types to ensure the proper behavior of the elements have layout.
Introducing the elastic box layout model object : to provide a more efficient way to arrange a container of the sub-elements, alignment and distribution of white space.
By the elastic box pop-up container (Flex container) and the elastic sub-elements (Flex item) composition. (Code demonstrates)
Elastic container provided by the display attribute value which is defined as the flex elastic container. The elastic container comprises one or more resilient sub-elements.
Note: the elastic box defines only the sub-elements in the elastic resilient how the box layout, or elastic than the elastic sub-elements inside the box layout is not affected, the elastic sub-elements in the elastic line shows generally box. By default, each container is only one line.
Normal layout code:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>弹性盒子</title> 6 <style> 7 main{ 8 background-color: #ccc; 9 } 10 main>.item{ 11 background-color: #fcc; 12 } 13 </style> 14 </head> 15 <body> 16 <nav style="display:none"> 17 <div class="logo">Logo</div> 18 <div class="menu">Menu</div> 19 <div class="user">User</div> 20 </nav> 21 <main> 22 <div class="item">News 1</div> 23 <div class="item">News 2</div> 24 <div class="item">News 3</div> 25 </main> 26 </body> 27 </html>
Second, the introduction of several concepts:
A spindle (main axis): container telescopic spindle, a telescopic main item along this axis aligned layout, is not necessarily horizontal spindle (depending on the properties justify-content)
Starting the spindle (main start) and the spindle end (main-end): a telescopic item placed in the telescopic direction of the container starting from the spindle to the spindle end.
Spindle size (main size): the height and width of the telescopic projects in the spindle direction depends on the size of the spindle, telescopic main project of the size of the property is either width or highly toxic properties, which is determined by the direction toward the spindle.
Side shaft (cross axis): side perpendicular to the spindle axis is referred to, the direction of the main spindle depending on the direction.
Starting side shaft (cross-start) and the side shaft end (cross-end): Configure the telescopic shaft line starting from the starting side edge of the holder, toward the end side of the shaft end side.
Side shaft size (main size): Telescopic project in the width direction or the height of the side of the shaft is the side length of the shaft projects, the telescopic side shaft length attribute item is the width or height, which is determined by a facing side axial direction.
Pictures schematic:
Fourth, the elastic properties of the box
Under ordinary arrangement of elements, arranged in a row if you want to make a lateral, may be provided as child elements float (float: left), but the height of the parent element is not provided, then there will collapse height (overflow: hidden)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Flex Box</title> 6 <style> 7 .box{ 8 border:1px solid red;overflow:hidden; 9 } 10 section{ 11 width:50px;height:50px; 12 background-color: lightblue; 13 float:left; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="box"> 19 <section>1</section> 20 <section>2</section> 21 <section>3</section> 22 <section>4</section> 23 <section>5</section> 24 </div> 25 </body> 26 </html>
Under ordinary circumstances element arrangement (the effect is vertically aligned)
to eliminate the default value
of the parent element to set the border
sub-element setting the width and height
is provided sideways floating arrangement (height collapse occurs, setting overflow) but arranged such too much trouble
(A) the display property
attribute action: the elastic container defined by its display attribute value flex or inline-flex elastic container as the container is defined.
Property values:
- flex the display object as a resilient and elastic cartridge
- inline-flex object as an inline (inner line) display block stage telescopic cartridge
Code Example
1, the parent element is provided an elastic cassette (the display: Flex )
element arranged laterally disposed elements arranged horizontally is no longer child elements block elements arranged in a row, but laterally. With the size of the parent element will change the page size changes .
1 <style> 2 .box{ 3 border:1px solid red;display:flex; 4 } 5 section{ 6 width:50px;height:50px; 7 background-color: lightblue; 8 border:1px solid blue; 9 } 10 </style>
2, disposed within the parent element is resiliently cartridge ( : inline-Flex the display )
the width of the parent element of the child element entirely on the expansion, the size does not change as the page size changes.
1 <style> 2 .box{ 3 border:1px solid red;display:inline-flex; 4 } 5 section{ 6 width:50px;height:50px; 7 background-color: lightblue; 8 border:1px solid blue; 9 } 10 </style>
(B) flex-direction property
attribute action : setting spindle and the cartridge side shaft stretching starting end position child element is always arranged in the direction from the origin to the destination.
Property values:
- row default transverse spindle, the starting point of the left end right side (the elements from left to right)
- row-reverse spindle lateral inversion, the right starting point, the left end (the elements from left to right)
- column shaft longitudinally above the starting point, the lower end (the elements from top down)
- column-reverse spindle longitudinal inverted, starting downward, the upper end (bottom-up element arrangements)
Code Example
1, the elastic container provided Flex-direction: Row , spindle laterally, starting on the left side, the right end sub-element sub-elements are arranged end to the (default) from the start of the spindle
.box{border:1px solid red;display:flex;flex-direction:row;}
2, the elastic container provided Flex-direction: Reverse-Row . Spindle counterclockwise, the left end, the right starting point of sub-elements are arranged from the beginning to the end of the main shaft, from right to left
.box{border:1px solid red;display:flex;flex-direction:row-reverse;}
3、设置弹性容器 flex-direction：column。主轴纵向，起点上方，终点下方
.box{border:1px solid red;display:flex;flex-direction:column;}
4、设置弹性容器flex-direction：column-reverse。主轴纵向反转，子元素按照主轴的方向排列。
.box{border:1px solid red;display:flex;flex-direction:column-reverse;}
（三）flex-wrap属性
属性作用:设置或检索伸缩盒对象的子元素超出父元素时是否换行
属性值:
- nowrap 当子元素溢出父元素的时候不换行(默认属性)
- wrap 当子元素溢出父元素的时候自动换行
- wrap-reverse 反转wrap排列
(换行默认的是从左向右从上到下，反转之后就是从左向右从下到上)
代码示例
父元素设置不足以放的下子元素的宽度(父元素200px子元素50五个)
普通情况下浮动，放不下的元素会掉下来
在弹性盒子父元素上设置宽度之后，盒子不会换行，子元素宽度压缩，不给任何设置的情况下，弹性盒子永远不会出现子元素塞不下，溢出父元素的情况
<style> .box{ width:200px; border:1px solid red; display:flex; } section{ width:60px;height:50px; background-color: lightblue; border:1px solid blue; } </style>
1、弹性容器设置flex-wrap：nowarp（默认值）。
父元素宽度不足以容纳子元素时，会对子元素宽度进行删减，确保子元素可以放进父元素
2、弹性容器设置flex-wrap：warp,对子元素进行强制换行，表现效果和设置了浮动一样。
3、弹性容器设置wrap-reverse，反转warp排列，从左向右，从下到上
（四）justify-content属性
属性作用:设置或检索伸缩盒子元素在主轴方向上的排列方式。（可以理解为水平对齐方式）
属性值:
- flex-start 弹性盒子元素向行起始位置对齐(默认情况)
- flex-end 弹性盒子元素向行结束位置对齐
- center 弹性盒子元素向行中间位置对齐
- space-between 子元素平均分布在行内
- space-around 弹性盒子元素平均分布在行内，两端保留子元素与子元素之间间距大小的一半。
代码示例
1、父元素设置display: flex弹性盒子，查看效果对比
2、设置justify-content：flex-end，元素排列起始不变，向右对齐（默认值，所以和只设置display：flex效果相同）
3、弹性容器justify-content:space-between子元素平均分布在行内
4、弹性容器设置justify-content:space-around。子元素平均分布在行内，两端保留子元素与子元素之间间距大小的一半。（根据浏览器窗口的改变进行放改变）
5、父元素设置justify-content:center。子元素居中排列
（五）align-items属性
属性作用:设置或检索弹性盒子元素在侧轴方向的对齐方式。（可以理解为垂直对齐方式）
属性值:
- flex-start设置弹性盒子元素侧轴起始位置的边界紧靠住该行侧轴起始边界
- flex-end设置弹性盒子元素侧轴起始位置的边界紧靠住该行侧轴结束边界
- center 子元素在该行侧轴上居中放置(如果该行尺寸小于子元素的尺寸，则会向两个方向溢出相同的长度)
- baseline 将文字对齐
- stretch 如果未设置元素高度，则将元素拉伸为父元素高度。(默认值)
代码示例
只设置父元素为弹性盒子，不设置子元素高度，子元素会被拉伸到父元素的高度
弹性容器除了stretch外，其他属性值都是，没有设置高度，时子元素会被内容撑开，不会拉伸到父元素的高度
1、弹性容器设置align-items：flex-start时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FlexBox</title> <style> .box{ /*width:220px;*/ height:100px; border:1px solid red; display:flex; align-items:flex-start; } section{ width:50px; background-color: lightblue; border:1px solid blue; } </style> </head> <body> <div class="box"> <section style="height:30px">1</section> <section style="height:50px">2</section> <section>3</section> <section style="font-size:40px">4</section> </div> </body> </html>
2、align-items:center元素处于正中
.box{ height:100px;border:1px solid red;display:flex;align-items:center; }
3、baseline 文字底部抵住基线
.box{ height:200px;border:1px solid red;display:flex;align-items:baseline; }
3、stretch子元素头部贴着侧轴的起点，底部如果没有设置高度则拉伸到和父元素同高
4、弹性容器设置align-items：flex-end时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FlexBox</title> <style> .box{ height:100px;border:1px solid red;display:flex;align-items:flex-end; } section{ width:50px; background-color: lightblue; border:1px solid blue; } </style> </head> <body> <div class="box"> <section style="height:30px">1</section> <section style="height:50px">2</section> <section>3</section> <section style="font-size:40px">4</section> </div> </body> </html>
