实例详解CSS Flexbox的具体用法

flexbox是一个强大而灵活的布局,本文主要介绍了css flexbox的具体用法详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

一、Flexbox简介

Flexbox布局(Flexible Box)模块旨在提供一个更加有效的方式制定、调整和分布一个容器里的项目布局,即使他们的大小是未知或者是动态的。简单的理解,就是可以自动调整,计算元素在容器空间中的大小,并进行有效合理的布局。

Flexbox布局中有两个重要的概念:Flex容器和Flex项目。

Flex容器包含多个Flex项目,通过对Flex容器和Flex项目的具体属性进行设置,可以达到各种各样灵活的布局样式。

立即学习“前端免费学习笔记(深入)”;

Flexbox使用

Flexbox的使用非常简单,只需要对Flex容器设置display:flex或者display:inline-flex,就可以具体操作使用Flexbox布局了。

下面以具体示例演示:

html代码

        

            

            

            

            

登录后复制

css代码

.container {    width: 70%;    height: 500px;    margin:20px auto;    border: 1px solid black;}.container .wrap {    display: flex;    border: 3px solid #a448cf;    margin:20px;    width:80%;    height:80%  }.container .wrap p {    width:150px;    height:150px;    background-color: #c75a5a;    margin:10px;}

登录后复制

实例详解CSS Flexbox的具体用法 

二、Flex容器

首先介绍下Flex容器的具体属性以及具体的使用方式。

属性 值 含义

flex-directionrow || column || row-reverse || column-reverse控制Flex项目沿着主轴(Main Axis)的排列方向flex-wrapwrap || nowrap || wrap-reverse控制Flex项目是否换行显示flex-flowrow wrap|| row nowrap || column wrap || column nowrap 等flex-direction和flex-wrap两个属性的组合速记属性justify-contentflex-start || flex-end || center || space-between || space-around控制 Flex项目在Main-Axis上的对齐方式align-itemsflex-start || flex-end || center || stretch || baseline控制Flex项目在 Cross-Axis 对齐方式align-contentflex-start || flex-end || center || stretch用于多行的Flex容器,控制Flex项目在 Cross-Axis 对齐方式

1. flex-direction

flex-direction属性控制Flex项目沿着主轴(Main Axis)的排列方向,可以是行(水平)、列(垂直)或者行和列的反向。

默认情况下flex-direction的属性值是row,具体排列方式如下:

实例详解CSS Flexbox的具体用法 

但是当flex-direction的属性值是column,对应的主轴就应该垂直向下。

具体应用示例如下:

实例详解CSS Flexbox的具体用法 

2. flex-wrap

flex-wrap属性控制Flex项目是否换行。默认情况下,Flex容器会在一行内容纳所有的Flex项目,因为flex-wrap属性的默认值是nowrap,也就是不换行。

具体应用示例如下:

实例详解CSS Flexbox的具体用法 

其中wrap-reverse表示Flex项目在容器中多行排列,只是方向是反的。

3. flex-flow

flex-flow是flex-direction和flex-wrap两个属性的速记属性。

具体不再解释,看下面示例即可:

实例详解CSS Flexbox的具体用法

4. justify-content

justify-content属性,控制Flex项目在整个Main-Axis上的对齐方式。

justify-content的默认属性值是flex-start。

实例详解CSS Flexbox的具体用法 

space-between让flex项目两端对齐。

space-around让每个flex项目具有相同的空间

5. align-items

align-items控制Flex项目在Cross-Axis对齐方式。

align-items的默认值是stretch,让所有的Flex项目高度和Flex容器高度一样,铺展开。

实例详解CSS Flexbox的具体用法 

baseline

让所有flex项目在Cross-Axis上沿着他们自己的基线对齐。

其中stretch和baseline在不设置具体高度值,才会如上表现,否则会显示固定的高度。

align-content属性与align-items作用相同,不过该属性只针对多行,对单行无效。

三、Flex项目

接下来继续介绍Flex项目的具体属性及使用方法。

属性 值 含义

order数值根据 order 值重新排序。从底到高。flex-grow0 || positive number控制Flex项目在容器有多余的空间如何放大flex-shrink0 || positive number控制Flex项目在容器 没有额外空间又如何缩小flex-basisauto || % || em || rem || px指定Flex项目的初始大小align-selfauto || flex-start || flex-end || center || baseline || stretch控制单个Flex项目在 Cross-Axis 对齐方式

1. order

order允许Flex项目在一个Flex容器中重新排序,属性默认值是0。

依据order值的大小进行排序,按照值从低到高依次排序。

默认情况下,排序如下:

实例详解CSS Flexbox的具体用法 

当将方块1设置order:1后,排序如下:

实例详解CSS Flexbox的具体用法 

如果,多个Flex项目具有相同的order值,Flex项目重新排序是基于HTML源文件的位置进行排序。

如下所示,将方块1和方块2都设置为order:1。

实例详解CSS Flexbox的具体用法

2. flex-grow 和 flex-shrink

flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大(扩展),在没有额外空间又如何缩小。

flex-grow和flex-shrink 的值可以为 0或者大于0的任何正数。

默认情况下,flex-grow属性值设置为0,表示Flex项目不会增长,填充Flex容器可用空间。

默认情况下,flex-shrink属性值设置为1,表示Flex项目会缩小,适应屏幕宽度。

如果把flex-grow的值设置为1,如下所示:

实例详解CSS Flexbox的具体用法

当多个flex项目在一行内,即不换行时,设置不同的flex-grow和flex-shrink 值,对应的空间分配也不同。 

flex-grow

将每一个item所设置的 grow 全部加起来,获得可用空间,然后除以总的grow值,得到单位分配空间。

根据每一个item 设置的 grow 来算,如果一个item 的grow 为 6,那么 这个 item 在主轴上的尺寸就需要延伸 6*单位分配空间的大小。

flex-shrink

先将所有项目 按照 flex-shrink * item-size 的方式加起来 得到一个加权和,然后计算出 每一份 item 的 shrink比例: shrink比例 = flex-shrink * item-size / 之前的总和。最后每一个item 减去这个 shrink比例 * 负可用空间。

在flex项目有min-width(height)和max-width(height)时,对应的项目要考虑上下限值,把剩余的伸缩值分配给其他项目。

3. flex-basis

flex-basis指定了 flex 元素在主轴方向上的初始大小,即决定了 flex项目内容的宽或者高(取决于主轴的方向)的尺寸大小。

默认情况,Flex项目的初始宽度由flex-basis的默认值决定,即:flex-basis: auto。Flex项目宽度的计算是基于内容的多少来自动计算。

flex-basis和width/height有一定的优先级,具体规则如下:

flex-basis 的优先级比 width/height 非auto高

width/height auto优先级等于 flex-basis,取两者中的最大值。

4. align-self

align-self 控制单个项目沿着Cross-Axis的对其方式。

实例详解CSS Flexbox的具体用法 

除了auto之外,上述示例中flex容器设置了align-itmes:center。

auto 是将目标flex项目的值设置为父元素的 align-items值,或者如果该元素没有父元素的话,就设置为 stretch。上述示例中align-items:stretch。

相关推荐:

flexbox实现弹性布局的实例分享

flexbox实现弹性布局的实例分享

flexbox实现弹性布局的实例分享

以上就是实例详解CSS Flexbox的具体用法的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2901040.html

(0)
上一篇 2025年3月11日 00:05:25
下一篇 2025年2月19日 09:59:56

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • CSS图片大小不固定的居中方法

    css是前端开发必不可少的一门语言,本文主要介绍了css居中实例之大小不固定的图片居中方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 1.利用table-cell实现垂直居中     […

    2025年3月11日
    200
  • 详解css3自定义滚动条样式写法

    本文我们主要和大家分享css3自定义滚动条样式写法,先简单介绍一下各个属性,文章会向大家展示四种效果。希望能帮助到大家。 ::-webkit-scrollbar       :滚动条整体部分,其中的属性有width,height,backg…

    2025年3月11日 编程技术
    200
  • 深入理解 CSS line-height 和 vertical-align的用法

    line-height 和 vertical-align 都是简单的 css 属性,以致于大多数人自以为知道这两个属性的工作原理。但实际上这两个属性非常复杂,也许算得上是 css 里最难的两个属性,因为这两个属性和 css 里一个鲜为人知的…

    2025年3月11日 编程技术
    200
  • 实例详解用CSS设定一个元素半透明

    大家会使用css设定一个元素半透明吗?本文主要介绍了用css设定一个元素半透明的相关资料,非常不错,具有参考借鉴价值,需要的朋友参考下吧,希望能帮助到大家。 .opacity{  filter:alpha(opacity=50);     …

    编程技术 2025年3月11日
    200
  • 关于css3新特性的形状总结

    css3是css的升级版,其中也出现了很多新特性,本文主要介绍了css3新特性应用之形状总结,非常具有实用价值,需要的朋友可以参考下,希望能帮助到大家。 一、自适应椭圆  border-radius特性: 可以单独指定水平和垂直半径,并且值…

    2025年3月11日 编程技术
    200
  • CSS3如何实现磨砂玻璃背景效果

    本文主要为大家详细介绍了css3如何打造磨砂玻璃背景效果,是css3中一个很有趣的技巧,希望能帮助到大家。 简介 这个效果是在看CSS Secrets这书上看到的,感觉很不错; 实现原理也挺简单的; 效果图及实现 立即学习“前端免费学习笔记…

    2025年3月11日
    200
  • 最全的CSS中background标签汇总

    在css开发中我们经常会用到background,本文主要为大家带来一篇css background全部汇总。小编觉得挺不错的,现在就分享给大家,也给大家做个参考,希望能帮助到大家。 所有背景属性都不能继承。 1. background-c…

    编程技术 2025年3月11日
    200
  • 常用的 css 命名规则实例分享

    本文主要和大家分享一些篇常用的 css 命名规则(推荐)。希望本文能帮助到大家,让大家更好的学习和掌握使用css。 常用的 css 命名规则(推荐) 头:header 内容:content/container 尾:footer 立即学习“前…

    编程技术 2025年3月11日
    200
  • CSS滤镜实现火焰效果实例讲解

    上次我们了解了一些css滤镜的基础知识,css滤镜 filter属性,本文主要介绍了通过css的滤镜实现火焰效果的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 这次我们就来用css的滤…

    2025年3月11日 编程技术
    200
  • 实例讲解CSS3 mask的具体使用方法

    css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。本文主要介绍了css3 mask 遮罩的具体使用方法,详细的介绍了css3 mask 遮罩的具体使用,具有一定的参考价值,有兴…

    2025年3月11日
    200

发表回复

登录后才能评论