flex布局的从认识到深刻认知到熟悉使用（详细图解）flex布局的初步认知flex的布局模型flex的container中的属性flex-item中的属性

65 阅读 0 评论 43 点赞

我是靠谱客的博主幽默电脑，最近开发中收集的这篇文章主要介绍flex布局的从认识到深刻认知到熟悉使用（详细图解）flex布局的初步认知flex的布局模型flex的container中的属性flex-item中的属性，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

flex布局的初步认知
- 兼容性
- 怎么开启一个flex布局
flex的布局模型
- 两个坐标系main axis和cross axis的一些重要念
flex的container中的属性
- flex-direction
- Justigy-content
- align-items
- flex-wrap
- flex-flow
- align-content
flex-item中的属性
- order
- align-self
- flex-grow
- flex-shrink
- felx-basis
- flex

flex布局的初步认知

在这里插入图片描述

兼容性

flex布局的兼容性是杠杠的，几乎普及了所有浏览器的pc端和移动端，微信小程序等移动端网页基本可以用flex布局代替浮动了
在这里插入图片描述

怎么开启一个flex布局

 .box{
            /* 开启flex布局 */
            /* 
            块级的开启方式是display设置为flex
            行内元素开启布局的方式是inline-flex
             */
            display: flex;

        }

flex的布局模型

在这里插入图片描述

两个坐标系main axis和cross axis的一些重要念

main axis被称为主轴，cross axis被称之为交叉轴，主轴的开始位置为main start 结束为止被称为main start，交叉轴的的开始位置被称为cross start ，结束为止被称为cross end，主轴的宽度为main size，同理cross size就是交叉轴的长度

注意的是上面这幅图来自官方是默认情况下的模型，有可能主轴是纵向的

flex的container中的属性

在这里插入图片描述

flex-direction

在这里插入图片描述

看如下代码

 <style>
        .box{
            /* 开启flex布局 */
            /* 
            块级的开启方式是display设置为flex
            行内元素开启布局的方式是inline-flex
             */
            display: flex;
            width: 500px;
            height: 400px;
            background-color: red;

        }

        .item{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

        .item1{
            background-color: rebeccapurple;
        }

        .item2{
            background-color: #0f0;
    
        }
        .item3{
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
        <!-- <div></div> -->

       
    </div> 
    <strong>加粗样式</strong>
</body>

默认情况主轴方向从左到右
在这里插入图片描述

当设置


            /* flex-direction默认情况从左到右 */
            flex: row;(默认值)


            /* 和主轴方向从右到左的排列 */
            flex-direction: row-reverse;


            /* 主轴方向从上到下 */

            flex-direction:column;


            /* 主轴方向下到上 */

            flex-direction:column-reverse;

在这里插入图片描述

Justigy-content

*决定了flex items在main axis上的对齐放
在这里插入图片描述

  /* 默认值 与main start对齐*/
  justify-content: flex-start;

在这里插入图片描述

    /* flex-end与main end对齐 */
     justify-content: flex-end;

在这里插入图片描述

 /* 居中对齐 */

            justify-content:center;

在这里插入图片描述


            /* 间隔居中对齐 */

            /* justify-content: space-between; */

在这里插入图片描述

/* 均匀居中， */

            /* justify-content: space-evenly; */

在这里插入图片描述


            /* 两边的间隔小，中间间隔大 */

            /* justify-content: space-around; */

在这里插入图片描述

align-items

决定了flex items在cross axis上的对齐方式

在这里插入图片描述

如果flex-item没有设置高度，那么flex-item的高度不像以前那样他的高度由内容决定，而是他的高度会拉伸和父元素一样如下

在这里插入图片描述

align-items: normal;

在这里插入图片描述
前提是没有设置item高度

在这里插入图片描述

当给元素设置不同的高度时用normal或者flex-start如下cross start对齐


       .item1 {
           background-color: rebeccapurple;
           height: 60px;

       }

       .item2 {
           background-color: #0f0;
           height: 150px;

       }

       .item3 {
           background-color: #fff;
           height: 130px;
       }

   align-items: flex-start;

在这里插入图片描述

   align-items: flex-end;

按cross-end对齐

在这里插入图片描述

align-items: center;

按照交叉轴的中心点对齐
在这里插入图片描述

  align-items:baseline;

按照基线对齐（内容第一行文本的基线）
在这里插入图片描述

flex-wrap

如果把item变为9个
那么样式如下不换行显示，且元素是设置过宽度的的

在这里插入图片描述

换行显示

   flex-wrap: wrap;

在这里插入图片描述

反转换行交叉轴

   flex-wrap: wrap-reverse;

在这里插入图片描述

flex-flow

在这里插入图片描述

 flex-flow: row-reverse;

在这里插入图片描述

     flex-flow: row-reverse wrap;

在这里插入图片描述

align-content

align-content决定了多行flex item是在cross axis上的对齐方式，用法与justify-content类似

在这里插入图片描述 .
这里参考justify-content 看看吧，只不过把主轴换成了交叉轴

flex-item中的属性

order

在这里插入图片描述

      .box {
            /* 开启flex布局 */
            /* 
            块级的开启方式是display设置为flex
            行内元素开启布局的方式是inline-flex
             */
            display: flex;
            width: 550px;
            height: 400px;
            background-color: red;

        }

        .item {
            width: 100px;
            height: 100px;
            text-align: center;
            /* line-height: 100px; */
        }

        .item1 {
            background-color: rebeccapurple;
            order:10

        }

        .item2 {
            background-color: #0f0;
            order: 6;
       
        }

        .item3 {
            background-color: #fff;
            order: 100;
           
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item item1">item1</div>
        <div class="item item2">item2</div>
        <div class="item item3">item3</div>
    </div>
    <strong>加粗样式</strong>
</body>

align-self

在这里插入图片描述

.item3 {
            background-color: #fff;
            /* order: 100; */
            align-self: flex-end;
           
        }

这里的item3设置了align-self属性它将会覆盖父元素的align-item属性

在这里插入图片描述

flex-grow

在这里插入图片描述


        .item {
            width: 100px;
            height: 100px;
            text-align: center;
            /* line-height: 100px; */
        }

        .item1 {
            background-color: rebeccapurple;
            /* order:10 */
            flex-grow: 1;

        }

        .item2 {
            background-color: #0f0;
            /* order: 6; */
            flex-grow: 1;
       
        }

        .item3 {
            background-color: #fff;
            /* order: 100; */
            /* align-self: flex-end; */
            flex-grow: 1;
           
        }

把三个item的flex-grow 都设置为1会铺满主轴
在这里插入图片描述

flex-shrink

在这里插入图片描述


        .item1 {
            background-color: rebeccapurple;
            /* order:10 */
            /* flex-grow: 1; */
            flex-shrink: 2;


        }

        .item2 {
            background-color: #0f0;
            /* order: 6; */
            /* flex-grow: 1; */
            flex-shrink: 2;
        }

        .item3 {
            background-color: #fff;
            /* order: 100; */
            /* align-self: flex-end; */
            /* flex-grow: 1; */
            flex-shrink: 2;
        }

就是3个盒子将多出的部分按照1:2：2缩小

在这里插入图片描述

felx-basis

在这里插入图片描述

就是设置item在主轴方向的宽度，如果同时设置宽度有设置这个以这个为准

flex

在这里插入图片描述

最后

以上就是幽默电脑为你收集整理的flex布局的从认识到深刻认知到熟悉使用（详细图解）flex布局的初步认知flex的布局模型flex的container中的属性flex-item中的属性的全部内容，希望文章能够帮你解决flex布局的从认识到深刻认知到熟悉使用（详细图解）flex布局的初步认知flex的布局模型flex的container中的属性flex-item中的属性所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：html css
浏览次数：65 次浏览
发布日期：2024-10-03 21:05:01
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_10_f0_12__7__14_w.html

flex布局的从认识到深刻认知到熟悉使用（详细图解）flex布局的初步认知flex的布局模型flex的container中的属性flex-item中的属性

概述

文章目录

flex布局的初步认知

兼容性

怎么开启一个flex布局

flex的布局模型

两个坐标系main axis和cross axis的一些重要念

flex的container中的属性

flex-direction

Justigy-content

align-items

flex-wrap

flex-flow

align-content

flex-item中的属性

order

align-self

flex-grow

flex-shrink

felx-basis

flex

最后

评论列表共有 0 条评论

发表评论取消回复

flex布局的从认识到深刻认知到熟悉使用（详细图解）flex布局的初步认知flex的布局模型flex的container中的属性flex-item中的属性

概述

文章目录

flex布局的初步认知

兼容性

怎么开启一个flex布局

flex的布局模型

两个坐标系main axis和cross axis的一些重要念

flex的container中的属性

flex-direction

Justigy-content

align-items

flex-wrap

flex-flow

align-content

flex-item中的属性

order

align-self

flex-grow

flex-shrink

felx-basis

flex

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复