1修改主轴方向主轴默认在水平方向侧轴默认在垂直方向属性名flex-direction属性值 效果row 水平方向从左向右默认column 垂直方向从上向下row-reverse 水平方向从右向左2多行项目在容器交叉轴方向的对齐方式常用值flex-start:几行整体贴在容器最上面。flex-end:几行整体贴在容器最下面。center几行整体在容器中间上下都有空间space-between:上下贴边中间均匀分布space-around上下和中间的间距都是均匀分布的stretch行和项目都会被拉长填满整个容器高度。3align-content属性详解作用控制多行项目在交叉轴垂直方向上的对齐方式关键前提1必须先设置flex-wrap;让项目能换行形成多行2只有一行的时候align-content是无效的。3:容器的交叉方向默认是垂直方向必须有剩余空间才看得出效果。可选值flex-startflex-end,centerspace-betweenspace-aroundstretch。flex-wrap属性说明nowrap:默认不换行项目会被压缩以适应容器wrap换行项目超出容器时自动换到下一行wrap-reverse换行但反向显示。重要区别align-items用于“单行”内的所有项目。align-content用于“多行”整体。4项目的大小和缩放核心属性flex-basis初始尺寸作用项目在主轴上的初始的宽高高度默认autoflex-grow放大比例作用容器有剩余空间时项目瓜分空间的比例默认0不放大例flex-grow1 平分剩余空间值越大占的越多。练习代码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 classgallery div classphoto stylebackground: #ff4444;照片1/div div classphoto stylebackground: #ffaa33;照片2/div div classphoto stylebackground: #0C851;照片3/div div classphoto stylebackground: #33b5e5;照片4/div div classphoto stylebackground: #2BBBAD;照片5/div div classphoto stylebackground: #9e66cc;照片6/div div classphoto stylebackground: #aa66cc;照片7/div div classphoto stylebackground: #ffbb33;照片8/div div classphoto stylebackground: #0C8ff;照片9/div div classphoto stylebackground: #ff44aa;照片10/div div classphoto stylebackground: #ff44f9;照片11/div /div /body /html运行效果如下练习2代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleFlex布局-课堂练习/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 classnavbar div classlogo网站Logo/div ul classnav-links lia href 首页/a /li lia href#产品/a /li lia href#服务/a /li lia href#关于我们/a /li lia href#联系我们/a /li /ul div classsearch-box input typetext placeholder搜索... buttoni classfa fa-search/i/button /div /nav div classcontainer h1欢迎来到我们的网站/h1 p这里是一些关于我们的内容。/p /div /body /html运行效果
CSS弹性布局2
1修改主轴方向主轴默认在水平方向侧轴默认在垂直方向属性名flex-direction属性值 效果row 水平方向从左向右默认column 垂直方向从上向下row-reverse 水平方向从右向左2多行项目在容器交叉轴方向的对齐方式常用值flex-start:几行整体贴在容器最上面。flex-end:几行整体贴在容器最下面。center几行整体在容器中间上下都有空间space-between:上下贴边中间均匀分布space-around上下和中间的间距都是均匀分布的stretch行和项目都会被拉长填满整个容器高度。3align-content属性详解作用控制多行项目在交叉轴垂直方向上的对齐方式关键前提1必须先设置flex-wrap;让项目能换行形成多行2只有一行的时候align-content是无效的。3:容器的交叉方向默认是垂直方向必须有剩余空间才看得出效果。可选值flex-startflex-end,centerspace-betweenspace-aroundstretch。flex-wrap属性说明nowrap:默认不换行项目会被压缩以适应容器wrap换行项目超出容器时自动换到下一行wrap-reverse换行但反向显示。重要区别align-items用于“单行”内的所有项目。align-content用于“多行”整体。4项目的大小和缩放核心属性flex-basis初始尺寸作用项目在主轴上的初始的宽高高度默认autoflex-grow放大比例作用容器有剩余空间时项目瓜分空间的比例默认0不放大例flex-grow1 平分剩余空间值越大占的越多。练习代码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 classgallery div classphoto stylebackground: #ff4444;照片1/div div classphoto stylebackground: #ffaa33;照片2/div div classphoto stylebackground: #0C851;照片3/div div classphoto stylebackground: #33b5e5;照片4/div div classphoto stylebackground: #2BBBAD;照片5/div div classphoto stylebackground: #9e66cc;照片6/div div classphoto stylebackground: #aa66cc;照片7/div div classphoto stylebackground: #ffbb33;照片8/div div classphoto stylebackground: #0C8ff;照片9/div div classphoto stylebackground: #ff44aa;照片10/div div classphoto stylebackground: #ff44f9;照片11/div /div /body /html运行效果如下练习2代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleFlex布局-课堂练习/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 classnavbar div classlogo网站Logo/div ul classnav-links lia href 首页/a /li lia href#产品/a /li lia href#服务/a /li lia href#关于我们/a /li lia href#联系我们/a /li /ul div classsearch-box input typetext placeholder搜索... buttoni classfa fa-search/i/button /div /nav div classcontainer h1欢迎来到我们的网站/h1 p这里是一些关于我们的内容。/p /div /body /html运行效果
