css 弹性布局的详细说明

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

CSS弹性布局(Flexible Box Layout,简称Flexbox)是一种用于创建自适应和可伸缩布局的CSS模块。它提供了一种简单而强大的方式来对容器中的子元素进行布局,使它们能够自动调整大小、排列和对齐。

Flexbox通过在容器和子元素上应用一些特定的CSS属性来实现布局。下面是一些常用的Flexbox属性:

  1. display:指定容器为Flex容器,可以设置为display: flex;display: inline-flex;。前者会将Flex容器作为块级元素显示,后者会将Flex容器作为行内元素显示。

  2. flex-direction:指定子元素的排列方向,可以设置为flex-direction: row;(水平排列,默认值)、flex-direction: row-reverse;(水平反向排列)、flex-direction: column;(垂直排列)或flex-direction: column-reverse;(垂直反向排列)。

  3. flex-wrap:指定子元素是否换行,可以设置为flex-wrap: nowrap;(不换行,默认值)、flex-wrap: wrap;(换行)或flex-wrap: wrap-reverse;(反向换行)。

  4. justify-content:指定子元素在主轴上的对齐方式,可以设置为justify-content: flex-start;(默认值,左对齐)、justify-content: flex-end;(右对齐)、justify-content: center;(居中对齐)、justify-content: space-between;(两端对齐,子元素之间间隔相等)或justify-content: space-around;(子元素之间间隔相等,两端的间隔是子元素之间间隔的一半)。

  5. align-items:指定子元素在交叉轴上的对齐方式,可以设置为align-items: flex-start;(默认值,顶部对齐)、align-items: flex-end;(底部对齐)、align-items: center;(居中对齐)、align-items: stretch;(拉伸填充)或align-items: baseline;(基线对齐)。

  6. align-content:指定多行子元素在交叉轴上的对齐方式,仅在有多行时生效,可以设置为align-content: flex-start;(默认值,顶部对齐)、align-content: flex-end;(底部对齐)、align-content: center;(居中对齐)、align-content: space-between;(两端对齐,行之间间隔相等)或align-content: space-around;(行之间间隔相等,两端的间隔是行之间间隔的一半)。

整体使用Flexbox布局的示例:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  padding: 10px;
  background-color: lightblue;
}

在上面的示例中,我们创建了一个Flex容器.container,并在其中放置了三个子元素.item。通过设置.containerdisplay: flex;属性,将其设置为Flex容器。然后,我们使用justify-content: space-between;将子元素在主轴上等间距排列,并使用align-items: center;将子元素在交叉轴上居中对齐。.itemflex: 1;属性使其自动调整大小以填充剩余空间,paddingbackground-color属性用于样式设置。

这样,子元素就会按照等间距排列,并在容器中居中对齐。Flexbox的弹性布局特性使得容器中的子元素能够自动适应不同的屏幕尺寸和布局要求,提供了更灵活和简洁的布局方式。

常见的Flexbox属性的使用示例:

  1. display: flex;:将容器设置为Flex容器,子元素水平排列。
.container {
  display: flex;
}
  1. flex-direction: row;:子元素水平排列,默认值。
.container {
  flex-direction: row;
}
  1. flex-direction: column;:子元素垂直排列。
.container {
  flex-direction: column;
}
  1. justify-content: flex-start;:子元素左对齐,默认值。
.container {
  justify-content: flex-start;
}
  1. justify-content: flex-end;:子元素右对齐。
.container {
  justify-content: flex-end;
}
  1. justify-content: center;:子元素居中对齐。
.container {
  justify-content: center;
}
  1. justify-content: space-between;:子元素两端对齐,子元素之间间隔相等。
.container {
  justify-content: space-between;
}
  1. justify-content: space-around;:子元素之间间隔相等,两端的间隔是子元素之间间隔的一半。
.container {
  justify-content: space-around;
}
  1. align-items: flex-start;:子元素顶部对齐,默认值。
.container {
  align-items: flex-start;
}
  1. align-items: flex-end;:子元素底部对齐。
.container {
  align-items: flex-end;
}
  1. align-items: center;:子元素居中对齐。
.container {
  align-items: center;
}
  1. align-items: stretch;:子元素拉伸填充。
.container {
  align-items: stretch;
}
  1. align-items: baseline;:子元素基线对齐。
.container {
  align-items: baseline;
}

这些属性可以根据实际需求进行组合和调整,以实现不同的布局效果。

常见的组合使用

  1. 水平居中对齐:
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
  1. 垂直居中对齐:
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
  1. 等间距排列:
.container {
  display: flex;
  justify-content: space-between;
}
  1. 左对齐并自动换行:
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
  1. 右对齐并自动换行:
.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
}
  1. 上下间隔相等的垂直排列:
.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
  1. 水平和垂直居中对齐:
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

这些组合使用的父类和子类可以根据实际需求进行调整和扩展,以实现不同的布局效果。文章来源地址https://www.toymoban.com/news/detail-598073.html

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

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

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

相关文章

  • html&CSS-----弹性布局

      目录 前言 什么是弹性布局  样式  学习概要 容器和项目 弹性布局的排列方式 1.横向排列(默认样式)  2.父元素容器的属性(*5) (1)主轴  代码示例:  (2)交叉轴 3.子元素项目的属性(*4)         前面我们学习了浮动布局方式,那么今天我们学习新的布局方式-

    2024年02月13日
    浏览(43)
  • CSS 弹性布局

    提示:这篇比较重要,做复杂页面时经常会用到!会不断更新❗ 提示:这里可以添加本文要记录的大概内容: 弹性布局的总体思想是把布局不写在标记上,而是把布局的样式代码写在最大的父标记上 让布局实现自适应和自动调整,可以在不同屏幕大小和设备上保持一定的布

    2024年02月11日
    浏览(83)
  • CSS3弹性布局

    2009年,W3C提出一种崭新的布局方案—弹性盒(Flexbox)布局,使用该模型可以轻松地创建自适应窗口的流动布局,或者自适应字体大小的弹性布局。W3C的弹性盒布局分为旧版本、新版本及混合过渡版本3种不同的设计方案,其中混合过渡版本主要针对IE10进行兼容。目前,CSS3弹性布

    2024年02月06日
    浏览(47)
  • CSS弹性布局常用设置

    目录 一、单位元素 二、弹性容器 三、常用属性 三、项目实战效果 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1vm 去适配 初始化 设置一个容器元素为弹性块状元素(内部允许有弹性元素flex撑开)   

    2024年02月11日
    浏览(51)
  • CSS3弹性盒布局详解

    弹性盒( Flexible Box 或 Flexbox) 布局是CSS3提供的一种新的布局模式,是一种当页面需要适应不同的屏幕大小及设备类型时,确保元素拥有恰当行为的一种布局方式。 弹性盒的结构: 从图中所知,弹性盒由 弹性容器 , 弹性子元素 和 轴 构成,在默认情况下,弹性子元素的排布

    2024年01月18日
    浏览(44)
  • html&CSS-----弹性布局案例展示

    目录 前言 效果展示 ​编辑 代码 思路分析         上一期我们学习了弹性布局,那么这一期我们用弹性布局来写一个小案例,下面看代码(上一期链接htmlCSS-----弹性布局_灰勒塔德的博客-CSDN博客) html代码: CSS代码: 首先我们去创建一个大盒子box,作为容器,里面放入5个

    2024年02月12日
    浏览(45)
  • css3 flex弹性布局详解

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

    2024年02月05日
    浏览(45)
  • css之Flex弹性布局(父项常见属性)

    本篇博客会讲解css中的弹性布局的常见用法, 将一个div定义成flex容器,它分为主轴与交叉轴(其中左右边对应主轴的 start、end ,上下边对应交叉轴的 start、end ) 🪂行排列 flex-direction: row 🪂将行排列进行翻转排列 flex-direction: row-reverse 注意:由于翻转时主轴的start、end会进

    2024年02月08日
    浏览(52)
  • JavaWeb-CSS的盒模型与弹性布局

    每一个HTML就相当于一个矩形的\\\"盒子\\\". 这个盒子由以下几个部分组成 边框 border 内容 content(下图中间蓝色部分) 内边距 padding 外边距 margin 边框 边框的基础属性: 粗细: border-width 样式: border-style 颜色:border-color 接下来我们设计一个500x250的盒子 我们为其设置一个边框 我们会发现

    2024年02月07日
    浏览(42)
  • 【移动端网页布局】flex 弹性布局子项目属性 ① ( flex 属性用法说明 | 代码示例 : 占有剩余布局 / 平均分成若干等份 )

    flex 子项目 的常用属性 : flex 属性 : flex 子项目 在 flex 父容器 中 占有的 份数比例 , 如果都设置 1 , 那么将对应尺寸平分即可 ; align-self 属性 : 控制 flex 子项目 在 侧轴 的排列方式 ; order 属性 : 控制 flex 子项目 的排列顺序 ; 主要是修改前后顺序 , 原来是 1 - 2 - 3 排列顺序 , 可以

    2024年02月09日
    浏览(56)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包