<html>
<head>
<style type="text/css">
.contents{
width:800px;
height:200px;
background:#ffffAA;
position:fixed;
bottom:0;
left:0;
display: flex;
/*
设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
*/
flex-direction:row-reverse;
/*
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
*/
flex-wrap:wrap;
/*flex-wrap: nowrap | wrap | wrap-reverse;*/
flex-flow:row nowrap;
/*属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。*/
justify-content: flex-start;
/*
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
*/
align-items: flex-start;
/*
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
*/
align-content:center;
/*
flex-start:与交叉轴的起点对齐。
flex-end:与交叉轴的终点对齐。
center:与交叉轴的中点对齐。
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
stretch(默认值):轴线占满整个交叉轴。
*/
}
.contents div{
width:100px;
height:100px;
}
.div1{
background:#ff0000;
order:1; /* 排序 默认 0 */
flex-grow:1; /* 放大比例 默认 0 */
flex-shrink:1; /* 缩小比例 默认 0 */
flex-basis:100px; /* 分配多余空间之前,项目占据的主轴空间 */
flex:1 1 100px; /* 属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。*/
align-self: flex-end; /*auto | flex-start | flex-end | center | baseline | stretch*/
}
.div2{
background:#ffFF00;
order:2;
}
.div3{
background:#ff00FF;
order:1;
}
.div4{
background:#0000FF;
order:2;
}
.div5{
background:#00FF00;
order:2;
}
</style>
</head>
<body>
<div class="contents">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
</div>
</body>
</html>
一段代码看全CSS Flex布局
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- flex.css 快速布局 什么是 flex.css css3 flex 布局相信很多人已经听说过甚至已经在开发中...
- 布局的传统解决方案:是基于盒模型,这种布局依赖display属性 + position属性 + float属性,但...
- 一、flex container的属性 flex-direction 方向flex-wrap 换行flex...
- 2018年7月30日时间管理司马腾五十一天践行时间管理打卡: 1.早睡早起 2.音频已发 3.每日运动 4.每日感...