css的flex布局实现响应式九宫格
flex布局：flex布局为盒⼦模型提供了很⼤的便利性，具有lfex布局的元素成为容器，它的所有⼦元素成为项⽬。flex容器默认有两条相交轴，⼀条⽔平⽅向的主轴（main axis），⼀条垂直⽅向的交叉轴(cross axis)。⽔平轴的开始位置叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。默认项⽬沿主轴排列，在主轴上占的空间叫做main size，在垂直⽅向的轴叫做cross size。
容器的6个属性：flex-direction、flex-wrap、flex-flow、justify-content、align-content、align-items
flex-direction：属性在主轴上的⽅向。值为row | row-reverse | column | column-reverse；
flex-wrap：默认情况下，项⽬在⼀⾏排列。这个属性决定当项⽬在⼀⾏排不下时，如何换⾏。值为:wrap | no-wrap || wrap-reverse
flex-flow：是flex-direction 和flex-wrap的简写。
justify-content：项⽬在主轴上的对齐⽅式。值为flex-start | flex-end | center | space-between | space-around
align-items；项⽬在交叉轴上如何对齐。值为cross-start | cross-end | center | baseline | stretch
align-content：多根轴线的对齐⽅式。如果只有⼀根轴线，此属性不起作⽤。值为flex-start | flex-end | center | stretch | space-between | space-around
项⽬的6个属性：order、flex-grow、flex-shrink、flex-basis、flex、align-self
css3的calc()
calc()可以计算不同单位的值，也可以嵌套，不过符号之间⼀定要有空格，虽然"*"、"/"之间可以没有，建议还是加上空格。例如：width:calc(100% - 30px)；html的flex布局
css flex布局实现的响应式九宫格代码以效果图
<!-- css flex布局实现响应式九宫格以及calc()计算表达式的值 -->
<!DOCTYPE html>
<html>
<style>
.blockDiv{
width: 100%;
display:flex;
flex-wrap: wrap;
}
.block{
width: calc(calc(100% / 3) - 10px);
margin:5px;
height:50px;
box-sizing: border-box;
border:1px  solid #000;
}
</style>
<body>
<div class="blockDiv">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。