前端面试常见问题:css3弹性布局
2018-12-22 本文已影响0人
清汤饺子
兼容性：兼容现代浏览器，ie11;
- flex-direction：定义容器要在哪个方向上堆叠弹性项目。
column:从上到下
column-reverse:从下到上
row:从左到右
row-reverse:从右到左 - flex-wrap：指定flex项是否应该换行
wrap:要换行
nowrap:不要换行
wrap-reverse:上下顺序颠倒换行 - flex-flow：用于设置 flex-direction和 flex-wrap属性的简写属性。
- justify-content
用于对齐flex项
center：居中
flex-start:默认值，居左
flex-end:居右
space-around
space-between - align-items：垂直对齐Flex项
center：垂直居中
flex-start:
flex-end:
baseline - align-content：用于对齐柔性线
弹性布局实战
http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
基本网格布局
image.png
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.Grid{
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.Grid-cell{
display: flex;
justify-content: space-between;
}
.Grid-cell-wrap{
background: #ccc;
display: block;
width: 100%;
margin: 2px;
text-align: center;
}
</style>
<body>
<div class="Grid">
<div class="Grid-cell">
<div class="Grid-cell-wrap">1/2</div>
<div class="Grid-cell-wrap">1/2</div>
</div>
<div class="Grid-cell">
<div class="Grid-cell-wrap">1/3</div>
<div class="Grid-cell-wrap">1/3</div>
<div class="Grid-cell-wrap">1/3</div>
</div>
<div class="Grid-cell">
<div class="Grid-cell-wrap">1/4</div>
<div class="Grid-cell-wrap">1/4</div>
<div class="Grid-cell-wrap">1/4</div>
<div class="Grid-cell-wrap">1/4</div>
</div>
<div class="Grid-cell">
<div class="Grid-cell-wrap">反反复复付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付</div>
<div class="Grid-cell-wrap">反反复复付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付付</div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</body>
</html>
百分比布局
某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
image.png
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.Grid{
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.Grid-cell{
display: flex;
justify-content: space-between;
}
.Grid-cell-wrap{
background: #ccc;
display: block;
width: 100%;
margin: 2px;
text-align: center;
padding: 10px;
}
.flex-lof2{
flex: 0 0 50%;
}
.flex-lof3{
flex: 0 0 33.3%;
}
.flex-lof4{
flex: 0 0 25%;
}
</style>
<body>
<div class="Grid">
<div class="Grid-cell">
<div class="Grid-cell-wrap flex-lof2">1/2</div>
<div class="Grid-cell-wrap">auto</div>
<div class="Grid-cell-wrap">auto</div>
</div>
<div class="Grid-cell">
<div class="Grid-cell-wrap">auto</div>
<div class="Grid-cell-wrap flex-lof3">1/3</div>
</div>
<div class="Grid-cell">
<div class="Grid-cell-wrap flex-lof4">1/4</div>
<div class="Grid-cell-wrap">auto</div>
<div class="Grid-cell-wrap flex-lof3">1/3</div>
</div>
</div>
</body>
<script type="text/javascript">
</script>
</body>
</html>
圣杯布局
圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
image.png
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
.HolyGrail{
min-height: 1000px;
}
header,footer{
background: #ccc;
}
.HolyGrail-nav{
background: blue;
}
.HolyGrail-ads{
background: red;
}
.HolyGrail-content{
background: #eee;
}
.HolyGrail{
display: flex;
flex-direction:column;
}
header,footer{
flex-basis:100px;
}
.HolyGrail-body{
flex-grow:1;
display: flex;
}
.HolyGrail-nav,.HolyGrail-ads{
flex-basis:150px;
}
.HolyGrail-content{
flex-grow:1;
}
</style>
<body>
<body class="HolyGrail">
<header>header</header>
<div class="HolyGrail-body">
<nav class="HolyGrail-nav">left</nav>
<main class="HolyGrail-content">conter</main>
<aside class="HolyGrail-ads">right</aside>
</div>
<footer>footer</footer>
</body>
</body>
<script type="text/javascript">
</script>
</body>
</html>
