CSS3弹性盒和媒体查询、响应式布局
⼀、怪异盒模型的简介
⼆、弹性盒模型
Flexbox布局（Flexible Box）模块(⽬前处于W3C⼯作草案)旨在提供⼀个更佳有效的布局⽅式，更好的控制项⽬的对齐和⾃由分配容器空间，即使它们的⼤⼩是未知的或动态的。因此得其名"flex"。
Flex布局背后的主要思想是给容器控制项⽬（Flex项⽬）的宽度、⾼度的能⼒，使⽤Flex项⽬可以⾃动
填满容器的可⽤空间（主要是适应所有类型的显⽰设备和屏幕⼤⼩）。Flex容器使⽤Flex项⽬可以⾃动放⼤与收缩，⽤来填补可⽤的空闲空间。
注：Flexbox布局⽐较适合Web应⽤程序的⼀些⼩组件和⼩规模的布局，⽽Grid布局（⽹格单元格布局）更适合⽤于⼀些⼤规模的布局。
因为Flexbox是⼀个模块，⽽不是⼀个单⼀的属性，他涉及很多东西。其中有些概念是需要我们去理解的，⽐如“flex容器”–>⼀些属于容器上的属性(⽗元素)；“flex项⽬”–>⼀些属于容器⼦元素上的属性；
三、Flex容器属性(添加在⽗级元素上的)
1）display：定义⼀个Flex容器，根据其取的值来决定是内联还是块。Flex容器会为其内容建⽴新的伸缩格式化上下⽂。
两种⽅式
display : flex
display : inline-flex
这样做将元素定义为弹性容器，其⼦元素即弹性⼦元素。
flex 值表⽰弹性容器为块级。占⽤⼀⾏。flex布局对齐方式
inline-flex 值表⽰弹性容器为⾏内元素，可以多个元素并列在⼀⾏。
2）flex-direction：创建⽅轴，从⽽定义Flex项⽬在Flex容器中放置的⽅向。
Flexbox是⼀种单⽅向的布局概念。认为Flex项⽬主要排列⽅式要么是⽔平排列，要么是垂直列排列
.container{
flex-direction: row | row-reverse | column | column-reverse;
}
3）flex-wrap：默认情况之下，Flex项⽬都尽可能在⼀⾏显⽰。你可以根据flex-wrap的属性值来改变，
让Flex 项⽬多⾏显⽰。⽅向在这也扮演了⼀个重要⾓度，决定新的⼀⾏堆放⽅向。
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
4）flex-flow(适⽤于flex容器元素)：
这是flex-direction和flex-wrap两个属性的缩写。两个属性决定了伸缩容器的主轴与侧轴。默认值是row nowrap（中间⽤空格隔开）。
语法：
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
5）justify-content：设置或检索弹性盒⼦元素在主轴（横轴）⽅向上的对齐⽅式
justify-content：flex-start | flex-end | center | space-between | space-around
当弹性盒⾥⼀⾏上的所有⼦元素都不能伸缩或已经达到其最⼤值时，这⼀属性可协助对多余的空间进⾏分配。当元素溢出某⾏时，这⼀属性同样会在对齐上进⾏控制
6）align-items：定义flex⼦项在flex容器的当前⾏的侧轴（纵轴）⽅向上的对齐⽅式。
align-items： flex-start | flex-end | center | baseline(项⽬位于容器的基线上) | stretch(默认值。);
伸缩项⽬可以在伸缩容器的当前⾏的侧轴上进⾏对齐，这类似于justify-content属性，但是是另⼀个⽅向。align-items可以⽤来设置伸缩容器中包括匿名伸缩项⽬的所有项⽬的对齐⽅式。
7）align-content：
align-content：flex-start |flex-end|center|space-between|space-around | stretch
当伸缩容器的侧轴还有多余空间时，align-content属性可以⽤来调准伸缩⾏在伸缩容器⾥的对齐⽅式，这与调准伸缩项⽬在主轴上对齐⽅式的justify-content属性类似。请注意本属性在只有⼀⾏的伸缩容器上没有效果。
四、Flex项⽬属性(添加在⼦元素上的)
1）order：：⽤整数值来定义排列顺序，数值⼩的排在前⾯。可以为负值。
默认情况，Flex项⽬是按⽂档源的流顺序排列。然⽽，在Flex容器中可以通过order属性来控制Flex项⽬的顺序源。设置或检索弹性盒模型对象的⼦元素出現的順序。
order定义将会影响 <’ position '> 值为static元素的层叠级别，数值⼩的会被数值⼤的盖住。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。