<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex</title>
</head>
<body>
<!---------------容器的属性---------------------->
<!--1.flex-direction 表示子item的布局方向，与Android一样是以右上角为原点-->
<!--
1.row 从x轴起始点开始往终止点方向,默认
2.row-reverse 从x轴终止点开始往起始点方向
3.column 从y轴起始点开始往终止点方向
4.column-reverse 从y轴终止点开始往起始点方向
注意：终止点是指容器的最大高度处,如果由内容决定高度，那么最大高度处就是终止点
-->
<div style="display: flex;flex-direction: row;">
<div style="display: flex;flex-direction:row;margin: 10px">
<div style="width: 100px;height: 100px;background-color: green"></div>
<div style="width: 100px;height: 100px;background-color: black"></div>
</div>
<div style="display: flex;flex-direction:row-reverse;margin: 10px">
<div style="width: 100px;height: 100px;background-color: green"></div>
<div style="width: 100px;height: 100px;background-color: black"></div>
</div>
<div style="display: flex;flex-direction: column;margin: 10px">
<div style="width: 100px;height: 100px;background-color: green"></div>
<div style="width: 100px;height: 100px;background-color: black"></div>
</div>
<div style="display: flex;flex-direction: column-reverse;margin: 10px">
<div style="width: 100px;height: 100px;background-color: green"></div>
<div style="width: 100px;height: 100px;background-color: black"></div>
</div>
</div>
<!--2.flex-wrap 指定一条轴线上排列不下如何换行排列-->
<!--
nowrap 不换行，意味着会沿轴向压缩所有item，默认值
wrap 换行，与第一行对齐
wrap-reverse 换行，反过来与第一行对齐
-->
<div style="display: flex;flex-direction: row;flex-wrap: wrap-reverse;">
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>1</font>
</div>
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>2</font>
</div>
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>3</font>
</div>
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>4</font>
</div>
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>5</font>
</div>
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>6</font>
</div>
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>7</font>
</div>
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>8</font>
</div>
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>9</font>
</div>
<div style="width: 100px;height: 100px;background-color: green;margin: 10px">
<font>10</font>
</div>
</div>
<!--3.flex-flow flex-deriction和flex-wrap的同时写法-->
<div style="display: flex;flex-flow: row wrap;">
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>1</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>2</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>3</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>4</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>5</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>6</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>7</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>8</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>9</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>10</font>
</div>
</div>
<!--4.justify-content 定义在主轴上的对齐方式，主轴就是deriction的方向轴-->
<!--
以x轴主轴为例：
flex-start 紧挨主轴起点对齐
flex-end 紧挨主轴终点对齐
center 主轴居中
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等
-->
<div style="display: flex;flex-flow: row wrap;justify-content: space-around;">
<div style="width: 100px;height: 100px;background-color: blue;margin: 10px">1</div>
<div style="width: 100px;height: 100px;background-color: blue;margin: 10px">2</div>
<div style="width: 100px;height: 100px;background-color: blue;margin: 10px">3</div>
</div>
<!--5.align-items 定义在交叉轴上如何对齐，交叉轴是指当前主轴的另一个轴-->
<!--
flex-start 交叉轴的起点对齐
flex-end 交叉轴的终点对齐
center 交叉轴的中点对齐
baseline 第一个项目的底部对齐
stretch 如果项目未设置高度或设为auto，项目高度为容器高度
-->
<div style="display: flex;flex-flow: row wrap;justify-content: flex-start;align-items: baseline;width: 100px;height: 100px;margin: 10;background-color: yellow">
<span style="font-size: 40px">1</span>
<span>0</span>
<span style="font-size: 30px">2</span>
</div>
<!--6.align-content 如果有换行，定义所有行之间的对齐方式-->
<!--
flex-start 与交叉轴的起点对齐
flex-end 与交叉轴的终点对齐
center 与交叉轴的中点对齐
space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around 每根轴线两侧的间隔都相等
stretch 轴线占满整个交叉轴,每个轴区域大小相等,默认值
-->
<div style="display: flex;flex-flow: row wrap;justify-content: flex-start;align-items: flex-start;width: 500px;height: 500px;margin: 10px;background-color: black;align-content: space-between;">
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>1</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>2</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>3</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>4</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>5</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>6</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>7</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>8</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>9</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px">
<font>10</font>
</div>
</div>
<!---------------item的属性---------------------->
<!--1.order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为0-->
<div style="display: flex;flex-flow: row wrap;justify-content: space-between;">
<div style="width: 100px;height: 100px;background-color: red;margin: 10px;order: 3">
<font>1</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px;order: 2">
<font>2</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px;order: 1">
<font>3</font>
</div>
</div>
<!--2.flex-grow 属性定义项目的放大比例，对剩余空间来说，默认为0不放大-->
<div style="display: flex;flex-flow: row wrap;justify-content: space-between;">
<div style="width: 100px;height: 100px;background-color: red;margin: 10px;order: 3;flex-grow: 0.5">
<font>1</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px;order: 2">
<font>2</font>
</div>
<div style="width: 100px;height: 100px;background-color: red;margin: 10px;order: 1">
<font>3</font>
</div>
</div>
<!--3.flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小-->
<!--如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。-->
<div style="display: flex;flex-flow: row nowrap">
<div style="width: 600px;height: 100px;background-color: red;margin: 10px;flex-shrink: 1">
<font>1</font>
</div>
<!--就中间这个不缩小保持原大小-->
<div style="width: 600px;height: 100px;background-color: red;margin: 10px;flex-shrink: 0">
<font>2</font>
</div>
<div style="width: 600px;height: 100px;background-color: red;margin: 10px;flex-shrink: 1">
<font>3</font>
</div>
</div>
<!--4.flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。-->
<div style="display: flex;flex-flow: row nowrap">
<div style="height: 100px;background-color: red;margin: 10px;flex-basis: 800px">
</div>
<div style="width: 600px;height: 100px;background-color: red;margin: 10px;">
</div>
<div style="width: 600px;height: 100px;background-color: red;margin: 10px;">
</div>
</div>
<!--5.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。-->
<!--6.align-self属性允许单个项目有与其他项目不一样的交叉轴对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。-->
<!--该属性可能取6个值，除了auto，其他都与align-items属性完全一致-->
<div style="display: flex;flex-flow: row nowrap;justify-content: center;align-items: center;height: 300px;background-color: yellow">
<div style="width: 100px;height: 100px;background-color: black;margin: 10px"></div>
<div style="width: 100px;height: 100px;background-color: black;margin: 10px;align-self: flex-start;"></div>
<div style="width: 100px;height: 100px;background-color: black;margin: 10px;align-self: flex-end;"></div>
<div style="width: 100px;height: 100px;background-color: black;margin: 10px;align-self: flex-start;"></div>
<div style="width: 100px;height: 100px;background-color: black;margin: 10px"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>ERP</title>
<link rel="stylesheet" href="../resource/css/bootstrap.css">
<link rel="stylesheet" href="../resource/font-awesome-4.7.0/css/font-awesome.css">
<style type="text/css">
body,html{
margin: 0px;
padding: 0px;
height: 100%;
/*要使得页面分区可以自由滚动需要将全局的滚动条禁用掉*/
overflow-y: hidden;
overflow-x: hidden;
}
#left{
width: 200px;
height: 100%;
overflow-y: auto;
}
#content{
height: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
padding-top: 50px;
}
#right{
height: 100%;
overflow-y: auto;
flex-grow: 1;
background-color: gray;
display: flex;
flex-flow: row wrap;
/*当文字超出div宽度时自动换行*/
word-wrap: break-word;
}
</style>
</head>
<!--使用display:table垂直居中-->
<!-- <a href="#" class="navbar-brand" style="padding: 0px;margin-top:3px;display: table">
<i class="fa fa fa-camera-retro fa-3x" style="color: black;display: table-cell;vertical-align: middle;"></i>
<font style="display: table-cell;vertical-align: middle;padding-left: 10px">ERP系统</font>
</a> -->
<body>
<div class="container-fluid" style="height: 100%">
<div class="row">
<!--#导航条-->
<nav class="navbar navbar-default navbar-fixed-top" style="padding-left: 10px;padding-right: 10;">
<!--导航头部-->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="sr-only">导航切换</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--使用display:flex垂直居中-->
<a href="#" class="navbar-brand" style="padding: 0px;display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: center;">
<i class="fa fa-camera-retro fa-2x" style="color: black;"></i>
<font style="padding-left: 10px">ERP系统</font>
</a>
</div>
<!--导航主体-->
<div class="collapse navbar-collapse" id="navbar-menu">
<!--导航左边部分-->
<ul class="nav navbar-nav pull-left">
<li class="cative"><a href="#">Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">
<span class="notification">dropdown</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">
Database
<span class="notification">3</span>
</a>
</li>
</ul>
</li>
</ul>
<!--导航右边部分-->
<ul class="nav navbar-nav pull-right">
<li class="cative"><a href="#">Home</a></li>
<li class="cative"><a href="#">About</a></li>
<li class="cative"><a href="#">Portfolio</a></li>
<li class="cative"><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
<div class="row" style="height: 100%">
<div id="content">
<div id="left">
<!--1.面板组-->
<div class="panel-group" id="silder">
<!--2.面板选项-->
<div class="panel panel-info" style="margin: 0px">
<!--头-->
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#silder"
href="#h1_c">
用户管理
</a>
</h4>
</div>
<!--展开-->
<div id="h1_c" class="panel-collapse collapse">
<div class="panel-body">
<a href="#">
新增用户
</a>
</div>
<div class="panel-body">
<a href="#">
修改用户
</a>
</div>
<div class="panel-body">
<a href="#">
删除用户
</a>
</div>
<div class="panel-body">
<a href="#">
查询用户
</a>
</div>
<div class="panel-body">
<a href="#">
角色变更
</a>
</div>
</div>
</div>
<div class="panel panel-info" style="margin: 0px">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#silder"
href="#h2_c">
角色管理
</a>
</h4>
</div>
<div id="h2_c" class="panel-collapse collapse">
<div class="panel-body">
<a href="#">
新增角色
</a>
</div>
<div class="panel-body">
<a href="#">
查询角色
</a>
</div>
<div class="panel-body">
<a href="#">
修改角色
</a>
</div>
<div class="panel-body">
<a href="#">
删除角色
</a>
</div>
</div>
</div>
<div class="panel panel-info" style="margin: 0px">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#silder"
href="#h3_c">
菜单管理
</a>
</h4>
</div>
<div id="h3_c" class="panel-collapse collapse">
<div class="panel-body">
<a href="#">
新增菜单
</a>
</div>
<div class="panel-body">
<a href="#">
查询菜单
</a>
</div>
<div class="panel-body">
<a href="#">
修改菜单
</a>
</div>
<div class="panel-body">
<a href="#">
删除菜单
</a>
</div>
</div>
</div>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
<h1>B</h1>
</div>
</div>
<div id="right">
<div style="width: 100%;height: 200px;background-color: red;margin: 10px"></div>
<div style="width: 200px;height: 200px;background-color: red;margin: 10px"></div>
<div style="width: 200px;height: 200px;background-color: red;margin: 10px"></div>
<div style="width: 100px;word-wrap: break-word;">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="../resource/js/=jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../resource/js/bootstrap.js"></script>
</html>
网友评论