css-flex使用

这篇具有很好参考价值的文章主要介绍了css-flex使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

flex

弹性盒,伸缩盒,一种新的布局方法,主要是用来代替浮动来完成页面的布局
flex可以使元素具有弹性,让元素可以跟随页面的大小改变而改变

弹性容器

要使用弹性盒,必须要先将一个元素设置为弹性容器:

  • display: flex 设置为块级弹性容器
  • display: inline-flex 设置为行级弹性容器

属性

父元素规定了宽度或高度、如果弹性元素整体的宽度或高度超过了父元素的宽度或高度,默认情况不会换行,而是发生弹性元素压缩

flex-direction

弹性元素排布方向

  • row 默认方式,水平、靠左排列,主轴从左向右
  • row-reverse 水平、靠右、反向排列,主轴从右向左
  • column 纵向排列,主轴从上到下
  • column-reverse 纵向、靠下、反向排列,主轴从下到上
flex-wrap

弹性元素的换行

  • nowrap 默认方式,不换行,不换行如果超出父元素大小,那么父元素主轴方向出现滚动条
  • wrap 换行,沿着主轴方向排列,主轴空间不够沿着侧轴方向换行然后继续排列弹性元素;
  • wrap-reverse 反向换行,整体沿着侧轴方向排列,主轴方向依旧按照顺序排列
flex-flow

flex-directionflex-wrap的简写属性

align-items

弹性元素在分割单元中如何进行布局;

当设置了flex-wrap: wrap;,且发生了换行:

  • 如果弹性容器没有指定弹性容器侧轴方向上的长度
    这种情况下,弹性元素在侧轴方向上的长度由弹性元素本身内容决定;但是主轴上的所有弹性元素在侧轴上的占据的空间的长度都一样(实际弹性元素的大小由align-items决定)

  • 如果弹性容器指定了弹性容器侧轴方向上的长度
    首先按照没有指定弹性容器在侧轴方向上的长度的方法对弹性元素在侧轴方向进行空间分配,然后将弹性容器在侧轴方向上的剩余空间分配给不同主轴上的弹性元素。

  • 分割单元
    也就是说,整体上,弹性容器最终会被几条主轴和侧轴进行分割,每个分割的单元容纳一个弹性元素,但是这个分割出来的单元并不一定是弹性元素的大小;

  • stretch
    默认方式,弹性元素拉伸铺满分割单元,保证主轴方向上一行的弹性元素的长度在侧轴方向上是一样的;
    先按照弹性元素本身需要的空间大小进行空间分配,然后将弹性容器侧轴方向的剩余空间平均分配给不同行的弹性容器。

  • flex-start
    弹性元素侧轴方向不会拉伸铺满分割单元,他在侧轴方向位于分割单元的顶边

  • flex-end
    弹性元素侧轴方向不会拉伸铺满分割单元,他在侧轴方向位于分割单元的终边

  • center
    弹性元素侧轴方向不会拉伸铺满分割单元,他在侧轴方向居中

  • baseline
    弹性元素侧轴方向不会拉伸铺满分割单元,他在侧轴方向沿着第一行的基线进行对齐

justify-content

justify可以理解为 – 水平的
当主轴上存在剩余空间,且弹性元素不发生flex-grow,主轴方向如何排列主轴上的元素

  • flex-start 弹性元素沿着主轴起边排列
  • flex-end 弹性元素沿着主轴终边排列
  • center 弹性元素居中排列
  • space-around 空白环绕分布到元素两侧
  • space-evenly evenly – 均匀,空白均匀分布到元素两侧
  • space-between 空白均匀分布到元素之间,元素边界不留空白
align-content

侧轴上空白空间的分布,这个同样用在当align-items不为stretch的情况;此时侧轴方向会出现空白,然后一行主轴的所有弹性元素视为一个元素,然后进行侧轴方向上的布局。
参数和justify-content一样

主轴和侧轴
  • 主轴 弹性元素的排列方向
  • 侧轴 与主轴垂直方向称为侧轴

弹性元素

弹性容器的子元素都是弹性元素(弹性项),不包括后代元素;
一个元素可以同时是弹性容器和弹性元素;

默认大小

  • 主轴方向 弹性元素主轴方大小跟随内容变化;
  • 侧轴方向 如果弹性容器指定了长度,那么弹性元素会铺满侧轴方向;如果弹性容器没有指定大小,那么弹性元素会跟随内容大小变化。

属性

flex-grow

指定弹性元素的伸展系数,也就是当父元素主轴方向存在剩余空间(主轴方向,父元素减去子元素flex-basis的剩余部分),子元素分配这些剩余空间时占比大小;

  • 0 默认值,不参与剩余空间分配
  • 1 以比例1参与分配
  • 2 以比例2参与分配
flex-shrink

指定弹性元素的收缩系数,也就是当父元素主轴方向无法容纳所有子元素(主轴方向,子元素flex-basis超过了父元素本身的大小),对子元素进行收缩时的单个子元素提供收缩空间的占比大小;

  • 0 不参与收缩
  • 1 默认值,以比例1进行收缩
  • 2 以比例2进行收缩
align-self

用来覆盖弹性容器中align-items的属性,也就是弹性元素在分割单元中如何进行布局。

flex-basis

分割单元宽度设置,和width类似
和width区别:

  • 如果主轴是横向的,则该值指定的就是元素的宽度
  • 如果主轴是纵向的,则该值指定的就是元素的高度
  • auto 默认值,表示参考元素自身的高度或宽度。
  • 如果传递了一个具体数值,则以该值为准
flex

简写属性:flex-grow flex-shrink flex-basis

  • initial 0 1 auto
  • auto 1 1 auto
  • none 0 0 auto
order

决定元素的排列顺序

  • 0 默认值
    调整顺序的时候不需要调整结构了;
    相同order按照顺序排列,可以为负数。

高度坍塌

弹性容器和不会高度坍塌。

flex布局子元素宽度超出父元素

flex布局子元素会超出父元素显示,有两种方式避免超出显示的问题:文章来源地址https://www.toymoban.com/news/detail-663079.html


到了这里,关于css-flex使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css3 flex弹性布局详解

    2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 Flex 是 Flexible Box 的缩写,意为\\\"弹性布局\\\",用来为盒状模型提供最大的灵活性。 开启flex布局:

    2024年02月05日
    浏览(45)
  • 前端知识——css 之 flex 布局

    🔥🔥🔥更多知识,欢迎访问我的个人博客:Nan-ying’s Blog 长久以来,CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning 。 但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举。 一些布局上的痛点无法解决: 比如在父内容里面垂直居

    2024年02月07日
    浏览(54)
  • 【移动端网页布局】Flex 弹性布局案例 ② ( 顶部固定定位搜索栏 | 固定定位盒子居中对齐 | 二倍精灵图设置 | CSS3 中的垂直居中对齐 )

    需求 : 制作如下搜索栏 ; 首先 , 设置固定定位 , 固定定位盒子始终显示在浏览器中指定的位置 , 与父容器或其它容器无关 ; 然后 , 设置固定定位盒子垂直方向位置 , 设置为 top: 0; 紧贴顶部 ; 再后 , 设置 left: 50% 样式 , 将盒子左侧设置到中心位置 , 这个 50% 是相对于父容器的 比

    2024年02月05日
    浏览(57)
  • 前端之css3

            1 新增实用的选择器,例如动态伪类,目标伪类,伪元素         2 新增更好的视觉效果         3 新增丰富的背景效果         4 新增全新的布局方案         5 新增web字体         6 新增颜色,hsl,hsla,rgba         7 新增2D和3D变换         8 新增动画和过渡效

    2024年02月13日
    浏览(70)
  • 前端学习——CSS3

    box-sizing resize box-shadow opacity background-origin background-clip background-size background复合属性 多背景图 边框圆角 边框外轮廓 文本阴影 文本换行 文本溢出 文本修饰 文本描边 线性渐变

    2024年02月12日
    浏览(53)
  • 【前端】CSS3新特性

      css3这个相信大家不陌生了,是个非常有趣,神奇的东西!有了css3,js都可以少写很多!最近我也在过一遍css3的一些新特性(不是全部,是我在工作上常用的,或者觉得有用的),以及一些实例,就写了这一篇总结!希望,这篇文章能帮到大家认识css3。   写这篇文章主

    2024年02月09日
    浏览(37)
  • 2023前端面试笔记 —— CSS3

    内容 链接 2023前端面试笔记 HTML5 2023前端面试笔记 CSS3 欢迎阅读本篇前端面试笔记的CSS3篇!CSS3是前端开发中非常重要的一部分,它为我们提供了丰富的 样式和动画效果 ,使得网页更加美观和交互性更强。在前端面试中,对CSS3的掌握程度往往是评判候选人技术水平的重要指标

    2024年02月11日
    浏览(51)
  • 前端小白的学习之路(CSS3 三)

    提示:过渡属性transition,动画属性animation,转化属性transform,裁剪属性clip-path,倒影属性box-reflect,模糊度属性filter  目录 一、transition  二、animation  三、transform  四、clip-path   五、box-reflect  六、filter  过渡:以看见标签从一个属性变化到另一个属性值的过程。 transition-pro

    2024年03月19日
    浏览(43)
  • css3-----3D变换,前端开发入门到精通

    x y z 的方向: 2、3d移动 translate3d 1.transform:translateX(npx);在x轴方向移动 2.transform:translateY(npx); 在y轴方向移动 3.transform:translateZ(npx); 在Z轴方向移动 4.transform:translate3d(x,y,z);综合写法 3、视距perspective 给元素添加3D效果,要给其父元素添加3D效果 视距:眼睛到屏幕的距离。视距与物

    2024年04月25日
    浏览(42)
  • 前端必学的CSS3波浪效果演示

    使用 translateX 和 translateZ 属性创建波浪效果: 使用场景: 适用于需要在X轴上平移和在Z轴上应用3D变换的波浪效果。 可以用于创建具有起伏效果的海浪、水面波纹等效果。 优点: 通过3D变换,可以实现更加真实的波浪效果。 可以通过调整 translateX 和 translateZ 的值来控制波浪

    2024年02月02日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包