CSS3 弹性盒布局

<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3 弹性盒布局</title>
<style>
 *{margin: 0;padding: 0;box-sizing: border-box;}
.flex-container {
list-style: none;

display: -webkit-flex;
display: -moz-flex;
display: -o-flex;
display: -ms-flex;
display: flex;
/*
 flex-direction：row | row-reverse | column | column-reverse
 row：主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）。
 row-reverse：对齐方式与row相反。
 column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
 column-reverse：对齐方式与column相反。
 */
flex-direction: row;
/*
 flex-wrap：nowrap | wrap | wrap-reverse
 nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
 wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
 wrap-reverse：反转 wrap 排列。
 */
flex-wrap: wrap;
/*
 flex-flow：<' flex-direction '> || <' flex-wrap '>
 取值：
 <' flex-direction '>：
 定义弹性盒子元素的排列方向。
 <' flex-wrap '>：
 控制flex容器是单行或者多行。
 说明：
 复合属性。设置或检索弹性盒模型对象的子元素排列方式。
 */
}

.flex-item {
padding: 5px;
}
.flex-item:nth-child(1){order: -1;}
.flex-item:nth-child(2){order: -2;}
</style>
</head>
<body>
<ul class="flex-container">
<li class="flex-item">1<img src="http://placehold.it/300&text=10"></li>
<li class="flex-item">2<img src="http://placehold.it/300&text=20"></li>
<li class="flex-item">3<img src="http://placehold.it/300&text=30"></li>
<li class="flex-item">4<img src="http://placehold.it/300&text=40"></li>
<li class="flex-item">5<img src="http://placehold.it/300&text=50"></li>
<li class="flex-item">6<img src="http://placehold.it/300&text=60"></li>
</ul>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>

</script>
</body>
</html>
DEMO
秒客网

CSS3 弹性盒布局

相关文章
