cssFlexbox布局用法

CSS Flexbox布局模块

在Flexbox布局模块之前,有四种布局模式:
块(block),用于网页中的部分
内联(inline),用于文本
表(table),用于二维表数据
定位(position),用于元素的显式位置
Flexbox布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。
注意兼容问题:
webkit内核浏览器应使用前缀-webkit
IE浏览器,可以很好的兼容IE11+版本,对于IE10只有部分可以兼容,且使用时需增加-ms,IE10浏览器中容器定义成弹性伸缩盒时,需使用display: -ms-flexbox

十年的修水网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整修水建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“修水网站设计”,“修水网站推广”以来,每个客户项目都认真落实执行。

Flexbox元素

要开始使用Flexbox模型,您需要先定义一个Flex容器。
1
2
3
上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。




    
    Flexbox
    



1
2
3

flex布局必须有一个父元素,其display属性设置为flex。

flex容器的直接子元素自动成为flex项。

父元素(容器)

通过将display属性设置为flex,Flex容器变得灵活:

.flex-container {
   display: flex;
 }

##Flex容器属性有:
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction属性
##flex-direction属性定义容器要在哪个方向上堆叠弹性项目。
1
2
3
上面的元素表示一个包含三个flex项目的flex容器(蓝色区域)。 column值堆叠(但从顶部到底部):




    
    flexbox
    


flex-direction 属性

"flex-direction: column;" 垂直堆叠flex项目(从上到下):

1
2
3

column-reverse值堆叠(但从底部到顶部):

.flex-container {
   display: flex;
   flex-direction: column-reverse;
 }

row值水平堆放(左到右):

.flex-container {
   display: flex;
   flex-direction: row;
 }

row-reverse值水平堆放(但从右到左):

.flex-container {
   display: flex;
  flex-direction: row-reverse;
 }

flex-wrap属性

flex-wrap属性指定flex项是否应该换行。下面的示例有12个fiex项目,以更好地展示flex-wrap属性。

.flex-container {
   display: flex;
   flex-wrap: wrap;
 }

nowrap值指定Flex项目将不会换行(这是默认值):

.flex-container {
   display: flex;
   flex-wrap: nowrap;
 }

wrap-reverse值将flex项目倒置:

.flex-container {
   display: flex;
   flex-wrap: wrap-reverse;
 }

flex-flow属性

flex-flow属性是用于设置flex-direction和flex-wrap属性的简写属性。

.flex-container {
   display: flex;
   flex-flow: row wrap;
 }

##justify-content属性
justify-content属性用于对齐flex项:
1
2
3
center值中心对齐:




    
    flex
    


justify-content 属性

"justify-content: center;" 对齐容器中心的伸缩项目:

1
2
3

flex应用场景

使用Flex Box制作响应式网站和图库非常方便

CSS Flexbox属性

属性描述
display 指定用于HTML元素的框的类型
flex-direction 指定flex容器中可伸缩项目的方向
justify-content 当项目不使用主轴上的所有可用空间时,水平对齐flex项目
align-items 当项目不使用横轴上的所有可用空间时,垂直对齐flex项目
flex-wrap 指定是否应该包装flex项(如果在一行上没有足够的空间容纳它们)
align-content 修改flex-wrap属性的行为。它类似于对齐项,但是它不是对齐flex项,而是对齐flex行
flex-flow flex-direction和flex-wrap的简写属性
order 指定一个flex项相对于同一容器内其他flex项的顺序
align-self 用于flex项目。覆盖容器的align-items属性
flex flex-growth、flex-shrink和flex-base属性的简写属性

本文名称:cssFlexbox布局用法
分享路径:http://pwwzsj.com/article/gceijg.html