css3伸缩布局（附实例、图解）

justify-content 调整主轴对齐（水平）
align-items 调整侧轴对齐（垂直）单行比较多
flex-wrap控制是否换行
flex-flow是flex-direction、flex-wrap的简写形式
align-content堆栈（由flex-wrap产生独立行）对齐
order控制子盒子的排列顺序

正文

伸缩布局用法：

1，给父盒子添加伸缩布局模式

section {/* 父级盒子添加flex */display: flex;   /*父亲伸缩布局模式*/}

2，给子盒子分配份数

section div {flex: 1;    /*子盒子份数，这里是每个人各占一份*/}

效果：它是自适应屏幕的

属性：

1.flex子项目在主轴的缩放比例，不制动flex属性则不参与伸缩分配

min-width 最小值 min-width：200px 最小宽度不能小于200px
max-width 最大值同上

2.flex-direction（调整主轴方向，默认是水平方向）

取值：

row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
row-reverse：对齐方式与row相反。
column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse：对齐方式与column相反。

flex-direction: column;   /*垂直排列*/

注意：就算子盒子有固定多少px剩下的依然按份数分

justify-content 调整主轴对齐（水平）

设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

当弹性盒里一行上的所有子元素都不能伸缩或已经达到其最大值时，这一属性可协助对多余的空间进行分配。当元素溢出某行时，这一属性同样会在对齐上进行控制。

对应的脚本特性为justifyContent。

让子元素从父元素的开头开始排序父元素的

justify-content: flex-start;

让子元素从父元素的结尾开始排序，但是顺序不变

justify-content: end;

让子元素在中间排序，但是顺序不变

justify-content: center;

左右的盒子贴近父盒子，中间的平均分布空白间隙

justify-content: space-between;

相当于给每个盒子添加左右margin外边距

justify-content: space-around;

align-items 调整侧轴对齐（垂直）单行比较多

垂直对齐开始位置上对齐

align-items: flex-start;

垂直对齐开始位置底对齐

align-items: flex-end;

垂直居中

align-items: center;

让子元素的高度拉伸适用于父容器（子元素不加高度的前提下）

align-items: stretch;

flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子时的处理

Nowrap：默认值，规定灵活的项目不拆行不拆列
Wrap：规定灵活的项目在必要时拆行或拆列
Wrap-reverse：规定灵活的项目在必要时拆行或拆列，但是以相反的顺序

flex-flow是flex-direction、flex-wrap的简写形式

Flex-flow：flex-direction flex-wrap；
Flex-flow：排列方向换不换行；

例：

flex-flow: row wrap;

align-content堆栈（由flex-wrap产生独立行）对齐

Align-content是针对flex容器里面多轴（多行）的情况，align-items是针对一行的情况下排列

前提：

必须对父元素设置自由盒子属性 display：flex；并且设置排列方式为横向排列flex-direction：row；这样才能起作用

值：

Stretch：默认值，项目被拉伸以适应容器
Center：项目位于容器的中心
Flex-start：项目位于容器的开头
Flex-end：项目位于容器的结尾
Space-between：项目位于各行之间留有空白的容器内
Space-around：项目位于各行之前、之间、之后都留有空白的容器内

order控制子盒子的排列顺序

用整数值来定义排列顺序，数值小的在前面，可以是负值，默认0

例：

Order：1；

css3伸缩布局（附实例、图解）相关推荐

CSS3伸缩布局的应用
一.效果图二.源码 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
html伸缩布局,CSS3 伸缩布局（一）
CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或者动态的,这里简 ...
CSS3伸缩布局注意点——携程网案例
先贴两张效果图: 要求网页伸缩放大布局会自适应变换用到的新属性 display: flex Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的 ...
再谈三角形整理形态（附实例图解）
对称三角形的定义.市场含义.各项要点.研判诀窍.案例分析.上升/下降三角形的基本概念.市场含义.要点提示.注意事项.形态举例.还有底部三角形.扩散三角形.研判要点.操作要点. 千帆竞发的网易博客相关 ...
html中的box布局,CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程)
背景 Flexbox 布局(也叫Flex布局,弹性盒子布局)模块( W3C 候选推荐,截止到2017年10月)旨在提供一个更有效地布局.对齐方式,并且能够使容器中的子元素大小未知或动态变化情况下仍然能 ...
CSS3 Flex布局（伸缩布局盒模型）学习
CSS3 Flex布局(伸缩布局盒模型)学习转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...
CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
CSS3 弹性布局/伸缩布局 flex
CSS3 之弹性布局 flex 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. ...
自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
@TOC 组件都了解的差不多了,下面就是页面整体布局设计了.在HTML中,使用的是DIV + CSS的布局方式,也可以用在小程序里.不过因为移动端的分辨率不统一,使得布局的自适应十分重要.所以研究一下 ...
[24]CSS3 弹性伸缩布局(上)
一．布局简介 CSS3 提供一种崭新的布局方式:Flexbox 布局,即弹性伸缩布局模型(FlexibleBox).用来提供一个更加有效的方式实现响应式布局.但是用于这个布局方式还处于 W3C 的草案 ...

css3伸缩布局（附实例、图解）

css3伸缩布局（附实例、图解）相关推荐

最新文章

热门文章