您的位置：首页 > 其它

flex弹性盒模型布局

2016-07-31 16:19 323 查看

容器属性：
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，将占满整个容器的高度。

项目属性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.con{
width: 500px;
height: 300px;
outline: 1px solid black;
display: flex;
}
.con div{
width: 50px;
height: 50px;
outline: 1px solid black;
}
.one{background: red;} .two{background: orange} .three{background: yellow} .four{background: green} .five{background: blueviolet}

/*容器属性                                                                                               */
.con{
/*flex-direction: row;row-reverse;column;column-reverse*/
/*flex-wrap:wrap-reverse;wrap;nowrap*/
/*justify-content:space-between;flex-start;flex-end;center;spance-around*/
/*align-items: flex-end;flex-start;center;baseline;stretch;*/
}
/*项目属性*/
.one{
/*order: 1;  数越小越往前排列*/
/*flex-grow: 2;  默认为0，将剩余空间分给不为0的元素*/
/*flex-shrink:2; 默认为1，当父级空间不足，都将按比例减小，如果一个元素为0，其余为1，则这个元素不减小*/
/*align-self: flex-end;  可以覆盖父级的align-items属性，默认为auto，表示继承父级的align-items属性，如没有父元素则表现stretch*/
}

</style>
</head>
<body>
<div class="con">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>

</body>
</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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航