CSS3弹性盒子flex布局_IT分享知识网

大家好，欢迎来到IT知识分享网。

文章目录

代码前提

基础代码如下：

<!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          设置子项高度且平分父元素高度

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/10645.html

CSS3弹性盒子flex布局