css基础知识（1）------弹性盒子flex的使用

于 2024-01-05 14:51:45 发布
阅读量933 收藏 23
点赞数 23
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46684554/article/details/135409391
版权

 弹性盒子的特点

        弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
        弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
        弹性容器内包含了一个或多个弹性子元素。
        不会脱离文档流，不会破环网格布局，不会存在高度塌陷问题
        注意：
        弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
        弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
        设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

 主轴对齐


    主轴对齐方式 :justify-content
 
        属性值 作用
        flex-start 默认值, 起点开始依次排列
        flex-end 终点开始依次排列
        center 沿主轴居中排列
        space-around 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
        space-between 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间
        space-evenly 弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等


    单行侧轴对齐方式 : align-items

        属性值    作用
        flex-start    起点开始依次排列
        flex-end    终点开始依次排列
        center    沿侧轴居中排列
        stretch    默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器
        flex-start


    多行侧轴对齐方式align-content
        
        属性值    作用
        flex-start    默认值, 起点开始依次排列
        flex-end    终点开始依次排列
        center    沿主轴居中排列
        space-around    弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧
        space-between    弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间


  设置弹性元素自身在侧轴（纵轴）方向上的对齐方式align-self

 <el-select v-model="value1" placeholder="请选择justify-content">
    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
  <el-select v-model="value2" placeholder="请选择align-items">
    <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
  <el-select v-model="value3" placeholder="请选择align-content">
    <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>

  <el-select v-model="value4" placeholder="请选择 flex-direction">
    <el-option v-for="item in options4" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
  <div class="f f1" :style="{ justifyContent: value1, alignItems: value2, alignContent: value3, flexDirection: value4 }">
    <div class="a s"></div>
    <div class="b s"></div>
    <div class="c s"></div>
    <div class="a s"></div>
    <div class="b s"></div>
    <div class="c s"></div>
  </div>
  <div class="f">
    <div class="a a1 s1"></div>
    <div class="b b1 s1"></div>
    <div class="c c1 s1">center</div>
    <div class="d d1 s1">baseline</div>
    <div class="e e1 s1">stretch</div>
  </div>
  <!-- 两种居中 -->
  <div class="f">
    <div class="a s2"></div>
  </div>

修改主轴方向属性: flex-direction

      属性值    作用
      row    行, 水平(默认值)
      column    *列, 垂直
      row-reverse    行, 从右向左
      column-reverse    列, 从下向上


弹性子元素分配空间
      - flex 属性用于指定弹性子元素如何分配空间。

      auto: 计算值为 1 1 auto
      initial: 计算值为 0 1 auto
      none：计算值为 0 0 auto
      inherit：从父元素继承
      flex数值分配空间


  flex为1的推算过程
 flex作为属性出现的时候表示占据主轴上剩下的空间,由以下三个属性复合而成
      即flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写
      相对于其他元素进行扩展的量

      属性: flex-grow定义项目的的放大比例
      属性值:
      0 空间是默认的
      1 表示占据主轴上剩下的空间
      相对于其他元素进行收缩的量

      属性: flex-shrink定义项目的缩小比例
      属性值
      0 改变主轴的宽高不会被挤压
      1 改变主轴的宽高会被挤压
      项目的宽度(width作用一样)

      属性: flex-basis定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间。相当于设置初始值
      属性值:0~100%/auto
      三个属性推算出flex:1的效果

      默认值:0 1 auto
      常用值:1 1 0% => 简写成flex:1

<div class="flex-container">
    <div class="flex-item item1">flex item 1</div>
    <div class="flex-item item2">flex item 2</div>
    <div class="flex-item item3">flex item 3</div>
  </div>
  不设置flex-shrink时：
  <div style="display:flex;border:1px solid #000;">
    <div style="height:100px;background-color:gray;">1</div>
    <div style="height:100px;background-color:red;">2</div>
    <div style="height:100px;background-color:gray;">3</div>
  </div>
  第二个item的 flex-shrink为0时：
  <div style="display:flex;border:1px solid #000;">
    <div style="height:100px;background-color:gray;width:200px;">1</div>
    <div style="height:100px;background-color:red;width:200px;flex-shrink:0;">2</div>
    <div style="height:100px;background-color:gray;width:200px;">3</div>
  </div>
  第一个item的 flex-shrink为1(默认值)，第二个item的 flex-shrink为0，第三个item的 flex-shrink为2时：
  <div style="display:flex;border:1px solid #000;">
	<div style="height:100px;background-color:gray;width:200px;flex-shrink:1;">1</div>
	<div style="height:100px;background-color:red;width:200px;flex-shrink:0;">2</div>
	<div style="height:100px;background-color:gray;width:200px;flex-shrink:2;">3</div>
</div>

  第二个item的 flex-basis为80px，其他为flex-grow:1时：
  <div style="display:flex;border:1px solid #000;">
    <div style="height:100px;background-color:gray;flex-grow:1;">1</div>
    <div style="height:100px;background-color:red;flex-basis: 80px;">2</div>
    <div style="height:100px;background-color:gray;flex-grow:1;">3</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      options1: [{
        value: 'flex-start',
        label: 'flex-start'
      }, {
        value: 'flex-end',
        label: 'flex-end'
      }, {
        value: 'center',
        label: 'center'
      }, {
        value: 'space-around',
        label: 'space-around'
      }, {
        value: 'space-between',
        label: 'space-between'
      }, {
        value: 'space-evenly',
        label: 'space-evenly'
      }],
      value1: '',
      options2: [{
        value: 'flex-start',
        label: 'flex-start'
      }, {
        value: 'flex-end',
        label: 'flex-end'
      }, {
        value: 'center',
        label: 'center'
      }, {
        value: 'stretch',
        label: 'stretch'
      }],
      value2: '',
      options3: [{
        value: 'flex-start',
        label: 'flex-start'
      }, {
        value: 'flex-end',
        label: 'flex-end'
      }, {
        value: 'center',
        label: 'center'
      }, {
        value: 'space-around',
        label: 'space-around'
      }, {
        value: 'space-between',
        label: 'space-between'
      }],
      value3: '',
      options4: [{
        value: 'row',
        label: 'row'
      }, {
        value: 'column',
        label: 'column'
      }, {
        value: 'row-reverse',
        label: 'row-reverse'
      }, {
        value: 'column-reverse',
        label: 'column-reverse'
      }],
      value4: '',
    }
  },

}
</script>
<style>
.f {
  width: 400px;
  height: 400px;
  background-color: rgb(212, 176, 129);
  margin: 100px auto;
  display: flex;
}

.f1 {
  flex-wrap: wrap;
}

.s {
  width: 100px;
  height: 100px;
}

.s1 {
  width: 100px;
  min-height: 100px;
}

.s2 {
  width: 100px;
  height: 100px;
  margin: auto;
}

.a,
.d {
  background-color: #807272;
}

.b,
.e {
  background-color: #ccc;
}

.c {
  background-color: #bfa;
}

.a1 {
  align-self: flex-start;
}

.b1 {
  align-self: flex-end;
}

.c1 {
  align-self: center;
}

.d1 {
  align-self: baseline;
}

.e1 {
  align-self: stretch;
}

.flex-container {
  display: flex;
  width: 400px;
  height: 250px;
  margin: 0 auto;
  background-color: lightgrey;
}

.flex-item {
  background-color: cornflowerblue;
  margin: 10px;
}

.item1 {
  flex: 2;
}

.item2 {

  flex: 1;
}

.item3 {
  flex: 1;
}
</style>

小城-前端
关注
  • 23
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS3弹性盒布局总结，2024年最新2024年前端开发书籍推荐
04-10 550
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档[外链图片转存中…(img-oWOnnhJ0-1712701003658)]
实例讲解CSS3中的box-flex弹性盒属性布局
09-24
flex布局毫无疑问是当今Web页面的最强大布局方式,box-flex弹性盒模型是其中的一个代表,这里我们就来以实例讲解CSS3中的box-flex弹性盒模型布局
flex（弹性盒、伸缩盒）（css）
KennGum的博客
06-27 212
flex（弹性盒、伸缩盒） flex是css中的一种布局手段，它主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变 弹性容器 要使用弹性盒，必须先将一个元素设置为弹性容器 通过display来设置弹性容器 display: flex 设置为块级弹性容器 display: inline-flex 设置为行内的弹性容器 弹性容器设置属性 flex-direction 指定容器中弹性元素的排列方式 可选值： row 默认值，弹性元素在容器中水平排列
CSS3
chuyaonong6148的博客
04-27 332
justify-content 属性 内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。 各个值解析: flex-start： 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边...
CSS3 弹性盒子(Flex Box)
热门推荐
qq_52301431的博客
04-05 1万+
25、CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒子（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。 案例，实现水平垂直居中： 正在上传…重新上传取消 绝对定位与负边距实现 #container{ position:relative; } ..
CSS弹性盒子
Americadk的博客
01-09 2715
一、弹性盒子 弹性盒子是 CSS3 的一种新的布局模式。 引入弹性盒布局模型的目的：是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分 配空白空间 兼容性： IE11+及标准浏览器最新版是支持的 1、设置弹性盒子 任何容器都可以指定为一个弹性盒子 display: flex; display: inline-flex; 以上两条属性需要加给容器 以上两条属性需要加给容器 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局 设为Flex布局以后，子元素的
CSS弹性盒
weixin_53912712的博客
07-11 892
弹性盒介绍、弹性属性、弹性容器样式、弹性元素样式
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
CSS3 Flexbox中flex-shrink属性的用法示例介绍
09-25
当flex items的大小超过了flex container时， 各个flex item的压缩比例，下面有个不错的教程，大家可以参考下
CSS list-style-type属性使用方法
09-25
主要介绍了CSS list-style-type属性使用方法,需要的朋友可以参考下
详解CSS3中border-image的使用
09-25
主要介绍了详解CSS3中border-image的使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下
弹性盒子css
小菜儿前端的博客
03-23 1568
1，定义 弹性盒子是CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 2，内容 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素，子元素可以称为容器内的项目。 成为容器后，直接子元..
CSS——弹性盒模型(Flex)
qq_60361946的博客
08-06 983
本文大部分参考自阮一峰老师和B站UP主后盾人的Flex布局教程。
【CSS】CSS 布局——弹性盒子
小秀的博客
08-13 792
它特别适用于构建响应式设计和在容器内分配空间，即使项目的大小是未知的或动态的。Flexbox 通常用于将元素排列成一行或一列，并提供一组属性来控制 flex 容器内的项目行为。主轴是项目布局的主要方向（水平或垂直），即沿着 flex 元素放置的方向，而交叉轴与主轴垂直。包含 flex 项目并使用 flex 布局的容器称为 flex 容器。，但当交叉轴上有额外空间（项目跨越多行）时，它适用于整个 flex 容器。这个属性控制项目沿主轴对齐的方式。它允许您控制 flex 项目的放大比例，缩小比例，初始大小。
【CSS 弹性盒子布局 (Flexible Box Layout)】
Hey_Coder
12-27 653
CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的 基本概念和术语 2. flex 属性: 设置 伸缩项的 伸缩性和比例 (简写属性，用于伸缩项) 2.1 flex-grow 属性: 伸缩项 主轴上的 宽或高的 剩余空间的分配和比例 ( 数字值，默认不分配 0) 2.2 flex-shrink 属性: 设置 伸缩项的 收缩因子 (数字值，默认 等比例收缩 1) 2.3 flex-basis 属性: 伸缩项的 主轴方向上的初始 宽或高 (假设大小 ，不一定等于真实
Css3中的弹性盒子
u014265398的博客
12-03 199
1.弹性盒子的使用方法 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 弹性容器内包含了一个或多个弹性子元素。 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。 弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。 以下元素展示了弹性子元素在一行内显示，从左到右 2.弹性盒子使用案例 <!DOCTYP
CSS 弹性盒子模式
左手121
03-03 1431
弹性盒子模式 参考链接：CSS 弹性盒子布局 简介 在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。 块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的...
CSS3弹性盒
huhu_nihao的博客
06-21 186
CSS3弹性盒 一、介绍： ​ css3引入一种新的布局模式——Flexible Box布局，即伸缩布局盒模型（弹性盒布局），用来提供一个更有效的方式制定、调整和分布一个容器里的项目布局，即使他们的大小是未知或者动态的。 ​ 主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳的方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）,flex...
css温故知新——弹性盒子
qq_40934679的博客
02-11 546
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要 适应不同的屏幕大小以及设备类型 时确保元素拥有恰当的行为的布局方式。 通过display:flex; 来指定盒子类型 弹性父元素属性 flex-direction 指定了弹性子元素在父容器中的位置。 flex-direction: row | row-reverse | column | column-rever...
css display:inline-flex
最新发布
09-21
### 回答1： `display:inline-flex` 是 CSS 中的一个属性值，它用于设置一个元素以行内弹性盒的形式进行布局，即该元素会按照弹性盒模型的方式进行排列，但是它会像行内元素一样排列。 使用 `display:inline-flex` 可以让元素具有弹性盒子的一些特性，例如自适应宽度、自动换行等，同时也可以设置 flex 容器的属性，如 `justify-content` 和 `align-items` 等。这样可以方便地进行元素的排列和布局。 需要注意的是，`display:inline-flex` 是 CSS3 中的一个新特性，因此在一些旧的浏览器上可能不支持。如果需要兼容性更好的方案，可以考虑使用 `display:-webkit-inline-box` 或 `display:-moz-inline-box` 来实现类似的效果。 ### 回答2： CSS的display:inline-flex属性定义了一个内联弹性盒子。 首先，我们要了解弹性盒子（flexbox）。弹性盒子是一种用于布局的高度灵活的容器。它可以容纳和控制一组元素的排列方式，以便它们能够适应不同的屏幕尺寸和设备。 默认情况下，弹性盒子的display属性值为"flex"，这意味着该容器将作为块级元素显示。当我们将display属性值设为"inline-flex"时，弹性盒子将以内联元素的形式显示。 内联元素与行内元素类似，它们在同一行内进行排列，不会独占一行。与块级元素（如div）不同，内联元素不会独占一行空间。 使用display:inline-flex的主要优势是可以在页面中创建水平布局，而不会改变容器的块级特性。也就是说，它会将弹性盒子嵌入到文本流中，而不是使其单独占据一行。这使得我们可以将弹性盒子与其他文本元素结合使用，实现更灵活的布局效果。 需要注意的是，内联弹性盒子只对直接子元素起作用。因此，如果想要控制盒子内部的子元素，可以使用flex属性或其他相关的弹性盒子属性，如flex-direction、align-items、justify-content等。 总结来说，display:inline-flex属性可以将弹性盒子以内联元素的方式显示，这使得我们可以在水平布局中创建灵活的布局效果。这在某些情况下对于实现特定的页面布局非常有用。 ### 回答3： CSS的display:inline-flex是一种布局属性，用于在元素内部创建一个行内元素，并且使这个元素的子元素能够使用flexbox布局。 使用display:inline-flex可以使元素的子元素按照flexbox的规则进行布局，这样可以实现更灵活的布局效果。同时，由于它是行内元素，所以多个元素可以在同一行上进行布局。 与display:flex相比，display:inline-flex的主要区别在于前者会将元素的display属性设置为flex，而后者会将元素的display属性设置为inline-flex。 使用display:inline-flex时，可以通过设置相应的flex属性来控制子元素的布局方式，如设置flex-direction属性来控制子元素的排列方向（如水平方向或垂直方向）、设置flex-wrap属性来控制子元素是否换行，以及设置justify-content属性来控制子元素在主轴上的对齐方式等。 总结来说，display:inline-flex是一种常用的CSS属性，用于创建行内元素的flexbox布局。它可以在元素内部使用flexbox的相关属性，实现更灵活且具有响应式的布局效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值