大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
在Flexbox布局模块之前,有四种布局模式:
块(block),用于网页中的部分
内联(inline),用于文本
表(table),用于二维表数据
定位(position),用于元素的显式位置
Flexbox布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。
注意兼容问题:
webkit内核浏览器应使用前缀-webkit
IE浏览器,可以很好的兼容IE11+版本,对于IE10只有部分可以兼容,且使用时需增加-ms,IE10浏览器中容器定义成弹性伸缩盒时,需使用display: -ms-flexbox
十年的修水网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。成都全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整修水建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“修水网站设计”,“修水网站推广”以来,每个客户项目都认真落实执行。
要开始使用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项是否应该换行。下面的示例有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-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 Box制作响应式网站和图库非常方便
属性 | 描述 |
---|---|
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属性的简写属性 |