flex弹性盒模型布局

容器属性:
1.flex-direction:项目的排列方向
(1)row 主轴方向排列
(2)row-reverse 主轴反方向排列
(3)column 纵向排列
(4)column-reverse 纵向反方向排列
2.flex-wrap:项目的换行方式
(1)nowrap:不换
(2)wrap:换行,第一行在上方
(3)wrap-reverse:换行,第一行在下方
3.flex-flow:是flex-direction和flex-wrap 的简写,默认 row nowrap
4.justify-content:项目在主轴上的对齐方式
(1)flex-start 左对齐
(2)flex-end 右对齐
(3)center 居中
(4)space-between 两端对齐,项目之间的间隔相等
(5)space-around 每个项目两侧的间距相等
5.align-items:项目在交叉轴上对齐方式
(1)flex-start 交叉轴的起点对齐
(2)flex-end 交叉轴的终点对齐
(3)center 交叉轴的中点对齐
(4)baseline 项目第一行文字的基线对齐
(5)stretch (默认值)如果项目未设置高度,或者为auto,将占满整个容器的高度。

项目属性:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .con{
 8             width: 500px;
 9             height: 300px;
10             outline: 1px solid black;
11             display: flex;
12         }
13         .con div{
14             width: 50px;
15             height: 50px;
16             outline: 1px solid black;
17         }
18         .one{background: red;} .two{background: orange} .three{background: yellow} .four{background: green} .five{background: blueviolet}
19
20              /*容器属性                                                                                               */
21         .con{
22             /*flex-direction: row;row-reverse;column;column-reverse*/
23             /*flex-wrap:wrap-reverse;wrap;nowrap*/
24             /*justify-content:space-between;flex-start;flex-end;center;spance-around*/
25             /*align-items: flex-end;flex-start;center;baseline;stretch;*/
26         }
27         /*项目属性*/
28         .one{
29             /*order: 1;  数越小越往前排列*/
30             /*flex-grow: 2;  默认为0,将剩余空间分给不为0的元素*/
31             /*flex-shrink:2; 默认为1,当父级空间不足,都将按比例减小,如果一个元素为0,其余为1,则这个元素不减小*/
32             /*align-self: flex-end;  可以覆盖父级的align-items属性,默认为auto,表示继承父级的align-items属性,如没有父元素则表现stretch*/
33         }
34
35     </style>
36 </head>
37 <body>
38 <div class="con">
39     <div class="one">1</div>
40     <div class="two">2</div>
41     <div class="three">3</div>
42     <div class="four">4</div>
43     <div class="five">5</div>
44 </div>
45
46 </body>
47 </html>

1.order:项目的排列顺序。数值越小,排列越靠前,默认为0
2.flex-grow:属性定义项目的放大比例,默认为0,即:如果存在剩余空间,也不放大
3.flex-shrink 属性定义了项目缩小比例,默认为1,即如果空间不足,该项目将缩小。
4.flex 是flex-grow,flex-shrink flex-basis简写
5.align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性,默认值为auto,表示继承父类的align-items属性,如果没有父级,等同于stretch。

时间: 2024-11-05 17:33:33

flex弹性盒模型布局的相关文章

87.CSS Flex 弹性盒模型布局教程(共用的css在48篇文章gird)

CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 display:flex 注:设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 注:Safari 6.1+(前缀-webkit-) iOS 7.1+(前缀-webkit-)最新flex 兼容性查看请点此处 最新Flex兼容性 Flex 容器 flex contain

flex(弹性盒模型)布局写一个移动端

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>&

flex弹性盒模型理解

首先,flex布局的迷之属性们,如果一知半解,机械记忆的话,那不到半个月基本忘光光.先感受一下这12个flex布局属性,是不是很“迷”人. 容器属性 flex-flow flex-direction flex-wrap justify-content align-items align-content 元素属性 order flex-grow flex-shrink flex-basis flex align-self 就连老外也都在twitter吐槽不好理解,可见还是有一定的学习成本. 而目前

box flex 弹性盒模型(转载)

css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML .GladeXML. 使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.本文的例子使用以下的HTML代码: <body>  <div id="box1">1</div>  <div id="box2">2

flex弹性盒模型

flex 意思是弹性布局,用来给盒模型提供最大的灵活度,指定容器中的项目为弹性布局,类似于float:left; 比float的好处是容器没有设置高度,会根据项目来自适应高度,我们都知道,设置float属性,如果没有设置高度,那么容器会脱离文档流,需要清除浮动,才可以根据项目的高度规定高度. 父元素称之为容器,子元素称之为项目 水平的方向叫主轴, 水平和垂直交叉点,称之为交叉轴 flex中如果子元素中的总宽度不超过父级,那么就正常排列, flex中如果子元素中的总宽度超过父元素,那么就按照父级的

iPhone5,使用display:flex 弹性盒模型的兼容问题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name

flex 弹性盒模型

其它属性(block ,inline-block)转变为flex属性display : flex 容器的属性 flex-direction: 决定主轴方向(即项目的排列顺序) row :默认值,主轴在水平方向,起点在左端 row-reverse :主轴在水平方向,起点在右端 column :主轴在垂直方向,起点在上沿 column-reverse :主轴在垂直方向,起点在下沿 flex-wrap : 默认情况下,项目都排列在一条线(轴线)上,若果一条轴线排不下,如何换行 nowrap :(默认值

css3中 弹性盒模型布局之box-flex

box-flex:也就是让子容器针对父容器的宽高属性按照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class="box1">01</div> <div class="box2">02</div> <div class="box3">03</div> </div> CSS样式: <

flex弹性盒模型(容器块上的属性)

容器块上的属性: flex-direction:决定主轴方向 值row:(默认值)主轴为水平方向,起点在左端 row-reverse:水平方向,起点在右端 colum:垂直方向,起点在上沿 column-reverse:垂直方向,起点在下沿 flex-wrap:换行规则 值nowrap(默认值)不换行 wrap:换行,第一行在上方 wrap-reverse:换行,第一行在下方 justify-content:设置项目在主轴上的对齐方式 值conter居中 fle-start:从起点开始排序 fl