CSS弹性布局2
1：修改主轴方向
主轴默认在水平方向，侧轴默认在垂直方向
属性名：flex-direction
属性值 效果
row 水平方向，从左向右（默认）
column 垂直方向，从上向下
row-reverse 水平方向，从右向左
2：多行项目在容器交叉轴方向的对齐方式
常用值：
flex-start:几行整体贴在容器最上面。
flex-end:几行整体贴在容器最下面。
center：几行整体在容器中间上下都有空间
space-between:上下贴边，中间均匀分布
space-around：上下和中间的间距都是均匀分布的
stretch：行和项目都会被拉长，填满整个容器高度。
3：align-content属性详解
作用：控制多行项目在交叉轴（垂直方向）上的对齐方式
关键前提：1：必须先设置flex-wrap;让项目能换行，形成多行，2：只有一行的时候，align-content是无效的。3:容器的交叉方向（默认是垂直方向）必须有剩余空间，才看得出效果。
可选值：flex-start，flex-end,center，space-between，space-around，stretch。
flex-wrap属性说明：
nowrap:默认不换行，项目会被压缩以适应容器
wrap：换行，项目超出容器时自动换到下一行
wrap-reverse：换行，但反向显示。
重要区别：align-items：用于“单行”内的所有项目。
align-content：用于“多行”整体。
4：项目的大小和缩放
核心属性
flex-basis：初始尺寸
作用：项目在主轴上的初始的宽高，高度
默认：auto
flex-grow：放大比例
作用：容器有剩余空间时，项目瓜分空间的比例
默认：0不放大
例：flex-grow：1 平分剩余空间；值越大，占的越多。
练习代码1：
<!DOCTYPE html> <html> <head> <style> .gallery { display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; width: 800px; height: 500px; border: 10px solid #333; } .photo { flex-basis: 200px; height: 120px; color: white; text-align: center; line-height: 120px; font-size: 18px; } </style> </head> <body> <div class="gallery"> <div class="photo" style="background: #ff4444;">照片1</div> <div class="photo" style="background: #ffaa33;">照片2</div> <div class="photo" style="background: #0C851;">照片3</div> <div class="photo" style="background: #33b5e5;">照片4</div> <div class="photo" style="background: #2BBBAD;">照片5</div> <div class="photo" style="background: #9e66cc;">照片6</div> <div class="photo" style="background: #aa66cc;">照片7</div> <div class="photo" style="background: #ffbb33;">照片8</div> <div class="photo" style="background: #0C8ff;">照片9</div> <div class="photo" style="background: #ff44aa;">照片10</div> <div class="photo" style="background: #ff44f9;">照片11</div> </div> </body> </html>运行效果如下：
练习2代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Flex布局-课堂练习</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .navbar { display: flex; align-items: center; justify-content: space-between; background: #333; color: white; padding: 0 20px; height: 60px; } .logo { font-size: 20px; font-weight: bold; } .nav-links { display: flex; list-style: none; gap: 20px; } .nav-links a { color: white; text-decoration: none; } .search-box { display: flex; align-items: center; } .search-box input { padding: 5px; border: none; border-radius: 3px 0 0 3px; } .search-box button { padding: 5px 10px; border: none; background: #ff4444; color: white; border-radius: 0 3px 3px 0; cursor: pointer; } .container { padding: 20px; } </style> </head> <body> <nav class="navbar"> <div class="logo">网站Logo</div> <ul class="nav-links"> <li><a href=" ">首页</a ></li> <li><a href="#">产品</a ></li> <li><a href="#">服务</a ></li> <li><a href="#">关于我们</a ></li> <li><a href="#">联系我们</a ></li> </ul> <div class="search-box"> <input type="text" placeholder="搜索..."> <button><i class="fa fa-search"></i></button> </div> </nav> <div class="container"> <h1>欢迎来到我们的网站</h1> <p>这里是一些关于我们的内容。</p > </div> </body> </html>运行效果：