Flex实例

来源：互联网发布：淘宝差评时间编辑：程序博客网时间：2024/05/19 17:27

一:flex-flow(是flex-direction属性和flex-wrap属性的简写)

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>flex-flow</title><link rel="stylesheet" href=""><style>.parent{width: 100px;height: 100px;background-color: #ccc;display: flex;margin-bottom: 20px;}.box1{flex-flow: row nowrap;}.child{width: 20px;height: 20px;display: inline-block;text-align: center;background-color: #f89;border-radius: 10px;}</style></head><body><div class="parent box1"><span class="child">1</span><span class="child">2</span></div></body></html>

.box1{flex-flow: row-reverse nowrap;}

.box1{flex-flow: column nowrap;}

.box1{flex-flow: column-reverse nowrap;}

.box1{flex-flow: row nowrap;}

<div class="parent box1"><span class="child">1</span><span class="child">2</span><span class="child">3</span><span class="child">4</span><span class="child">5</span><span class="child">6</span><span class="child">7</span><span class="child">8</span><span class="child">9</span><span class="child">10</span><span class="child">11</span></div>

.box1{flex-flow: row wrap;}

.box1{flex-flow: row wrap-reverse;}

二：垂直水平居中（justify-content:center;align-items:center）

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>justify-content,align-items</title><link rel="stylesheet" href=""><style>.box{display: flex;background-color: #ddd;width: 200px;height: 200px;justify-content: center;align-items: center;margin-bottom: 20px;}</style></head><body><div class="box"><div class="child">垂直水平居中</div></div></body></html>

三：使用flex布局（上中下和左中右布局）

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""><style type="text/css">.holyGrid{display: flex;flex-direction: column;height: 600px;}/*整个盒子高度为600px,header footer的flex都为1，holyGrid-body的flex为4，则，每一份的高度为600/(1+1+4),header和footer都为100px，holyGrid-body的高度为400px */header,footer{flex: 1;background-color: #ccc;}.holyGrid-body{display: flex;flex: 4;}.holyGrid-content{background-color: #f89;flex: 1}/*flex: 0 0 100px;左右两侧的宽度固定都为100px*/.holyGrid-nav,.holyGrid-aside{flex: 0 0 100px;}/* order默认为0，值越小排列越靠前order:-1,的holyGrid-nav就排在最前面; */.holyGrid-nav{background-color: #35f;order:-1;}.holyGrid-aside{background-color: #5f7;}</style></head><body class="holyGrid"><header></header><div class="holyGrid-body"><main class="holyGrid-content"></main><nav class="holyGrid-nav"></nav><aside class="holyGrid-aside"></aside></div><footer></footer></body></html>

阅读全文

0 0