常见Flex布局实例

时间：2023-03-30 17:30:24 CSS

如果你对flex不是很熟悉，可以看我的另一篇文章Flex布局1，网格布局1.1，基本网格布局最简单的网格布局就是平均分布。HTML代码如下。1/2

1/2

1/3

1/31/3CSS代码如下。.Grid{显示：flex;}.Grid-cell{flex:1;背景：#eee；margin:10px;}这里最重要的是flex:1这样每个子元素都可以按比例缩放1.2,percentage布局某个网络grid的宽度是一个固定的百分比，剩下的grid分配剩余的空间一样。HTML代码如下。

50%自动自动

自动50%1/3的CSS代码如下。.col2{flex:0050%;}.col3{flex:0033.3%;}这里最重要的是通过flex的第三个属性，即flex-basis来定义元素占用的空间。2.圣杯布局圣杯布局（HolyGrailLayout：）是指最常见的网站布局之一。页面从上到下分为三个部分：页眉、正文和页脚。树干横向分为三栏，从左到右分别是导航、主栏、辅栏。HTML代码如下。headercontentnavasidefooterCSS代码如下。.container{显示：flex;弹性方向：列；最小高度：100vh；}.body{显示：flex；flex:1;}header,footer{flex:00100px;}.content{flex:1;}.ads,.nav{flex:00100px;}.nav{order:-1;}.bg{background:#eee;margin:10px;}@media(max-width:768px){.body{flex-direction:column;弹性：1；}.nav,.ads,.content{flex:auto;}}这里需要注意的地方是容器的flex-direction:column，它保证header、body、footer是垂直的，将header和footer排列在轴上。footer的高度可以通过flex:00100px来控制。导航的位置可以通过命令调整：-1。小屏的页面结构可以通过@media(max-width:768px)调整3.固定边宽边边的宽度是固定的，右边的自适应html代码如下。放在一边headercontentfooterCSS代码如下。.bg{背景：#eee;边距：10px;}.container1{最小高度：100vh;显示：flex;}.aside1{/*flex:00200px;*/flex:0020%;}.body1{显示：flex;弹性方向：列；flex:1;}.content1{flex:1;}.header1,.footer1{flex:0010%;}这个和上面基本一样，不再解释。4、流式布局每行项目数固定，自动分行。html代码如下css代码如下。container2{宽度：200px；高度：150px；显示：弹性；弹性流：行换行；align-content:flex-start;}.item{box-sizing:border-box;背景：#eee；弹性：0020%；高度：40px；margin:5px;}这里主要是使用flex-flow:rowwrap来让子元素水平排列并换行。总结下面是我简单总结的一些布局。如有错误，请指正。更多系列文章

上一篇：认识贝塞尔曲线

下一篇：使用CSS制作炫酷的球体动画效果

常见Flex布局实例相关文章