CSS3弹性盒子flex布局

程序员buddha

2024-07-07 帮助1人

代码前提

基础代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>box</title>
        <style type="text/css">
            .box {
                margin: 0 auto;
                width: 480px;
                height: 480px;
                border: 3px solid red;
            }

            .box .item {
                width: 120px;
                height: 120px;
            }

            .item:nth-child(1) {
                background-color: #F92672;
            }

            .item:nth-child(2) {
                background-color: #78943A;
            }

            .item:nth-child(3) {
                background-color: #66D9EF;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>

浏览器显示效果如下：
学新通

flex布局要写的属性位置如下图所属

学新通

开启flex布局

display: flex;

flex-direction定义主轴排列

flex-direction：
      row            主轴为水平方向，起点在左端
      row-reverse    主轴为水平方向，起点在右端
      column         主轴为垂直方向，起点在上面
      column-reverse 主轴为垂直方向，起点在下面

flex-direction：row 主轴为水平方向，起点在左端
学新通
flex-direction: row-reverse 主轴为水平方向，起点在右端

flex-direction: column 主轴为垂直方向，起点在上面

flex-direction: column-reverse 主轴为垂直方向，起点在下面

flex-wrap 子项一行放不下时，是否换行

flex-wrap:
      nowrap        不换行，默认
      wrap          换行
      wrap-reverse  逆向换行

flex-wrap: nowrap 默认属性值，不换行
学新通
flex-wrap: wrap 换行

flex-wrap: wrap-reverse 逆向换行

justify-content 子项在主轴对齐方式

justify-content
         flex-start       默认，左对齐或者上对齐
         flex-end         右对齐或者下对齐
         center           居中
         space-around     两端对齐，间距相等，不贴边
         space-between    两端对齐，中间间隔相等，贴边

justify-content: flex-start 默认属性值，左对齐或上对齐
学新通

justify-content: flex-end 右对齐或下对齐

justify-content: center 主轴方向居中

justify-content: space-around 主轴方向两端对齐，子项间间距相等，不贴边

justify-content: space-between 主轴方向两端对齐，子项间间距相等，贴边
学新通

align-items子项在主轴垂直方向的排列顺序

align-items
         flex-start       默认，左面或上面
         flex-end        右对齐或者下对齐
         center           居中
         stretch          拉伸

align-items: flex-start 默认属性值，左面或者上面
学新通
align-items: flex-end 下面或右面

align-items: center 主轴垂直方向上居中

align-items: stretch 子项没有设置高度时才生效

align-conetnt主轴垂直方向的排列方式（多行子项）

align-conetnt
         flex-start       在侧轴的头部开始排序；默认值
         flex-end         在侧轴尾部开始排序
         center           在侧轴中间显示
         space-around     子项在侧轴平分剩余的空间
         space-between    子项在侧轴先分布在两端，再平分剩余空间
         stretch          设置子项高度且平分父元素高度

这篇好文章是转载于：学新通技术网

CSS3弹性盒子flex布局

代码前提

flex布局要写的属性位置如下图所属

开启flex布局

flex-direction定义主轴排列

flex-wrap 子项一行放不下时，是否换行

justify-content 子项在主轴对齐方式

align-items子项在主轴垂直方向的排列顺序

align-conetnt主轴垂直方向的排列方式（多行子项）

photoshop保存的图片太大微信发不了怎么办

photoshop扩展功能面板显示灰色怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

excel下划线不显示怎么办

微信公众号没有声音提示怎么办

微信运动停用后别人还能看到步数吗

excel打印预览压线压字怎么办