css – 设置自动边距时,停止flexbox折叠子宽度（css外边距折叠）

25-03-09 13

在这篇文章中，我们将为您详细介绍css–设置自动边距时,停止flexbox折叠子宽度的内容，并且讨论关于css外边距折叠的相关问题。此外，我们还会涉及一些关于CSS/Flexbox：与最大元素相同的宽

在这篇文章中，我们将为您详细介绍css – 设置自动边距时,停止flexbox折叠子宽度的内容，并且讨论关于css外边距折叠的相关问题。此外，我们还会涉及一些关于CSS / Flexbox：与最大元素相同的宽度,如列、CSS Flexbox、CSS Flexbox 布局、CSS flexbox宽度100％Firefox的知识，以帮助您更全面地了解这个主题。

本文目录一览：

css – 设置自动边距时,停止flexbox折叠子宽度（css外边距折叠）
CSS / Flexbox：与最大元素相同的宽度,如列
CSS Flexbox
CSS Flexbox 布局
CSS flexbox宽度100％Firefox

css – 设置自动边距时,停止flexbox折叠子宽度（css外边距折叠）

我正在使用flexBox创建一个粘性页脚.

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

header,footer {
    background-color: #c9c9c9;
    padding: 20px;
}

main {
    flex: 1;
    margin: 0 auto;
    max-width: 300px;
    border: 1px solid red;
}

<header></header>
<main>This is some content</main>
<footer></footer>

JsFiddle

这可行,但< main>的宽度现在折叠以适应内容,而不是扩展到最大宽度.仅当设置了自动边距时才会发生这种情况.

有没有办法让< main>设置自动边距时,扩展到最大宽度？

解决方法

添加宽度：100％;到< main>似乎解决了这个问题.

Fiddle link.

*,*:before,*:after {
    Box-sizing: border-Box;  
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

header,footer {
    background-color: #c9c9c9;
    padding: 20px;
}

main {
    flex: 1;
    margin: 0 auto;
    max-width: 300px;
    width: 100%;
    border: 1px solid red;
}

<header></header>
<main>This is some content</main>
<footer></footer>

CSS / Flexbox：与最大元素相同的宽度,如列

我为我的应用程序构建了一个列表组件,由于样式,我无法使用表.

我希望“行”内的元素从上到下具有相同的宽度,如列.代码看起来类似于：

<div>
  <div class"element>iPhone </div>
  <div class"element>Buy an iPhone Now!</div>
</div>
<div>
  <div class"element>Airport Express </div>
  <div class"element>Buy an Airport Express Now!</div>
</div>
<div>
  <div class"element>iPad </div>
  <div class"element>Buy an iPad Now!</div>
</div>

这就是它目前的样子：

这就是我想要的：

有没有办法做到这一点？

解决方法

使用CSS表格：

>具有边距的行之间的分隔
>细胞中的边界.您可以使用border-radius来舍入它们.
>伪元素显示为单元格以填充右侧的可用空间
> white-space：Nowrap以防止细胞因伪元素而收缩.

.wrapper {
  display: table;
  border-spacing: 0 10px;
}
.row {
  display: table-row;
  border: 1px solid;
}
.row::after {
  content: '';
  display: table-cell;
  width: 100%;
  border: 1px #6AACC9;
  border-style: solid none;
}
.element {
  display: table-cell;
  border: 1px solid #6AACC9;
  border-right-color: #adadad;
  border-left-style: none;
  padding: 5px;
  white-space: Nowrap;
}
.element:first-child {
  border-left-style: solid;
  border-radius: 5px 0 0 5px;
}

<div>
  <div>
    <div>iPhone </div>
    <div>Buy an iPhone Now!</div>
  </div>
  <div>
    <div>Airport Express </div>
    <div>Buy an Airport Express Now!</div>
  </div>
  <div>
    <div>iPad </div>
    <div>Buy an iPad Now!</div>
  </div>
</div>

CSS Flexbox

注：内容来自https://www.freecodecamp.org/learn/

简介：FlexBox（弹性盒子）是最新版本的 CSS（即 CSS3）中引入的一种强大且兼容性好的布局方法。使用 flexBox，我们可以很容易地处理好页面上的元素布局，并创建可以自动缩小和放大的动态用户界面。

使用 display: flex 定位两个盒子
使用 justify-content 属性对齐元素
使用 align-items 属性对齐元素
使用 flex-wrap 属性包裹一行或一列
使用 flex-shrink 属性定义 flex 子元素的收缩规则
使用 flex-grow 属性定义 flex 子元素的增长系数
使用 flex-basis 属性设置元素的初始大小
使用 flex 短方法属性
使用 order 属性重新排列子元素
使用 align-self 属性

使用 display: flex 定位两个盒子

给元素添加 display: flex 属性可以让它变成 flex 容器，然后可以让元素的项目排列成行或列。只要给父元素添加 flex-direction 属性，并把属性值设置为 row 或 column，即可横向排列或纵向排列它的所有子元素。创建一行将使子项水平对齐，创建一列将使子项垂直对齐。

flex-direction 的其他可选值还有 row-reverse 和 column-reverse。

注意：flex-direction 的默认值为 row。

<style>
  #Box-container {
    height: 500px;
    display: flex;
  }

  #Box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #Box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>
<div id="Box-container">
  <div id="Box-1"></div>
  <div id="Box-2"></div>
</div>

使用 justify-content 属性对齐元素

flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。幸运的是，我们可以通过 justify-content 属性的不同值来实现。在介绍属性的可选值之前，我们要先理解一些重要术语。

回忆一下，如果把 flex 容器设为一个行，它的子元素会从左到右逐个排列；如果把 flex 容器设为一个列，它的子元素会从上到下逐个排列。子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。

对于如何沿主轴线排放 flex 项目，有几种选择。很常用的一种是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。其他选择包括：

flex-start：从 flex 容器的起始位置开始排列项目。对行来说是把项目移至左边，对于列是把项目移至顶部。如未设置 justify-content 的值，那么这就是默认值。
flex-end：从 flex 容器的终止位置开始排列项目。对行来说是把项目移至右边，对于列是把项目移至底部。
space-between：项目间保留一定间距地沿主轴居中排列。第一个和最后一个项目被放置在容器边沿。例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

图源：https://www.samanthaming.com/flexBox30/14-space-around-vs-space-evenly/

使用 align-items 属性对齐元素

align-items 属性与 justify-content 类似。回忆一下，justify-content 属性使 flex 子元素沿主轴排列。行的主轴是水平线，列的主轴是垂直线。

Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。对行来说，定义的是元素的上下对齐方式；对列来说，是定义元素的左右对齐方式。

align-items 的可选值包括：

flex-start：从 flex 容器的起始位置开始对齐项目。对行来说，把项目移至容器顶部；对列来说，是把项目移至容器左边。
flex-end：从 flex 容器的终止位置开始对齐项目。对行来说，把项目移至容器底部；对列来说，把项目移至容器右边。
center：把项目居中放置。对行来说，垂直居中（项目距离顶部和底部的距离相等）；对列来说，水平居中（项目距离左边和右边的距离相等）。
stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。如未设置align-items的值，那么这就是默认值。
baseline：沿基线对齐。基线是文本相关的概念，可以认为它是字母排列的下端基准线。(文本中心对齐)

使用 flex-wrap 属性包裹一行或一列

CSS flexBox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。对于行来说，所有项目都会在一条直线上。

不过，使用 flex-wrap 属性可以使项目换行展示。这意味着多出来的子元素会被移到新的行或列。换行发生的断点由子元素和容器的大小决定。

换行方向的可选值有这些：

Nowrap：默认值，不换行。
wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。

使用 flex-shrink 属性定义 flex 子元素的收缩规则

目前为止，挑战里提到的属性都是应用于 flex 容器（flex 子元素的父元素）的。除此之外，flex 子元素也有很多实用属性。

首先介绍的是 flex-shrink 属性。使用之后，如果 flex 容器太小，则子元素会自动缩小。当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。

子元素的 flex-shrink 接受数值作为属性值。数值越大，则该元素与其他元素相比会被压缩得更厉害。比如，一个项目的 flex-shrink 属性值为 1，另一个项目的 flex-shrink 属性值为 3，那么后者相比前者会受到 3 倍压缩。

使用 flex-grow 属性定义 flex 子元素的增长系数

与 flex-shrink 相对的是 flex-grow。你应该还记得，flex-shrink 会在容器太小时对子元素作出调整。相应地，flex-grow 会在容器太大时对子元素作出调整。

例子与上一个挑战相似，如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍。

使用 flex-basis 属性设置元素的初始大小

flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。

flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。如果值为 auto，则项目的尺寸随内容调整。

使用 flex 短方法属性

上面几个 flex 属性有一个简写方式。 flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一并设置。

例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

属性的默认设置是 flex: 0 1 auto;。

请给 #Box-1 和 #Box-2 添加 flex 属性。设置 #Box-1 的 flex-grow 属性值为 2、flex-shrink 属性值为 2、flex-basis 属性值为 150px。设置 #Box-2 的 flex-grow 属性值为 1、flex-shrink 属性值为 1、flex-basis 属性值为 150px。

通过上面的设置，在容器大于 300px 时，#Box-1 扩大的空间会是 #Box-2 扩大空间的两倍；在容器小于 300px 时，前者缩小的空间会是 #Box-2 缩小空间的两倍。 300px 是两个盒子的 flex-basis 属性值之和。

使用 order 属性重新排列子元素

order 属性告诉 CSS flex 容器里子元素的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。

使用 align-self 属性

flex 子项目的最后一个属性是 align-self。这个属性允许你调整单个子元素自己的对齐方式，而不会影响到全部子元素。因为 float、clear 和 vertical-align 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。

align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值。

CSS Flexbox 布局

CSS 弹性盒子 Flexbox 布局

Flexbox（弹性盒子）是 CSS3 中引入的一种强大且兼容性好的布局方法。使用 flexbox，可以很容易地处理好页面上的元素布局，并创建可以自动缩小和放大的动态用户界面。

flex 盒子模式

只要在一个元素的 CSS 中添加 display: flex;，就可以使用其它 flex 属性来构建响应式页面了。

#box-container {
  display: flex;
}

行，列 Row Culomn

flex-direction 的其他可选值还有 row-reverse 和 column-reverse。

注意： flex-direction 的默认值为 row。

#box-container {
  display: flex;
  flex-direction: row; 
  /* flex-direction: column */
}

父元素对齐 Align

子元素排列的方向被称为 main axis（主轴）。对于行，主轴水平贯穿每一个项目；对于列，主轴垂直贯穿每一个项目。

对于如何沿主轴线排放 flex 项目，有几种选择。很常用的一种是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。其他选择包括：

flex-start：从 flex 容器的起始位置开始排列项目。对行来说是把项目移至左边，对于列是把项目移至顶部。如未设置 justify-content 的值，那么这就是默认值。
flex-end：从 flex 容器的终止位置开始排列项目。对行来说是把项目移至右边，对于列是把项目移至底部。
space-between：项目间保留一定间距地沿主轴居中排列。第一个和最后一个项目被放置在容器边沿。例如，在行中第一个项目会紧贴着容器左边，最后一个项目会紧贴着容器右边，然后其他项目均匀排布。
space-around：与space-between相似，但头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。
space-evenly：头尾两个项目不会紧贴容器边缘，所有项目之间的空间均匀排布。

#box-container {
  justify-content: center;
}

Flex 容器中，与主轴垂直的叫做 cross axis（交叉轴）。行的交叉轴是垂直的，列的交叉轴是水平的。

CSS 中的 align-items 属性用来定义 flex 子元素沿交叉轴的对齐方式。对行来说，定义的是元素的上下对齐方式；对列来说，是定义元素的左右对齐方式。

align-items 的可选值包括：

flex-start：从 flex 容器的起始位置开始对齐项目。对行来说，把项目移至容器顶部；对列来说，是把项目移至容器左边。
flex-end：从 flex 容器的终止位置开始对齐项目。对行来说，把项目移至容器底部；对列来说，把项目移至容器右边。
center：把项目居中放置。对行来说，垂直居中（项目距离顶部和底部的距离相等）；对列来说，水平居中（项目距离左边和右边的距离相等）。
stretch：拉伸项目，填满 flex 容器。例如，排成行的项目从容器顶部拉伸到底部。如未设置align-items的值，那么这就是默认值。
baseline：沿基线对齐。基线是文本相关的概念，可以认为它是字母排列的下端基准线。

#box-container {
  align-items: center;
}

换行 Wrap

CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。

默认情况下，flex 容器会调整项目大小，把它们都塞到一起。对于行来说，所有项目都会在一条直线上。

不过，使用 flex-wrap 属性可以使项目换行展示。这意味着多出来的子元素会被移到新的行或列。换行发生的断点由子元素和容器的大小决定。

换行方向的可选值有这些：

nowrap：默认值，不换行。
wrap：如果排列以行为基准，就将行从上往下排列；如果排列以列为基准，就将列从左往右排列。
wrap-reverse：如果排列以行为基准，就将行从下往上排列；如果排列以列为基准，就将列从右往左排列。

#box-container {
  flex-wrap: wrap;
}

收缩 Shrink

上面提到的属性都是应用于 flex 容器（flex 子元素的父元素）的。除此之外，flex 子元素也有很多实用属性。

#box-1 {
  flex-shrink: 1;
}
#box-2 {
  flex-shrink: 2;
}

扩大 Grow

与 flex-shrink 相对的是 flex-grow。flex-grow会在容器太大时对子元素作出调整。

如果一个项目的 flex-grow 属性值为 1，另一个项目的 flex-grow 属性值为 3，那么值为 3 的一个会较另一个扩大 3 倍。

#box-1 {
  flex-grow: 1;
}
#box-2 {
  flex-grow: 2;
}

初始大小 Basis

flex-basis 属性定义了在使用 CSS 的 flex-shrink 或 flex-grow 属性对元素进行调整前，元素的初始大小。

flex-basis 属性的单位与其他表示尺寸的属性的单位一致（px、em、% 等）。如果值为 auto，则项目的尺寸随内容调整。

#box-1 {
  flex-basis: 10em;
}
#box-2 {
  flex-basis: 20em;
}

简写 Shorthand

上面几个 flex 属性有一个简写方式。 flex-grow、flex-shrink和 flex-basis 属性可以在 flex中一并设置。

例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1;、flex-shrink: 0; 以及 flex-basis: 10px;。

属性的默认设置是 flex: 0 1 auto;。

#box-1 {
  flex: 2 2 150px;
}
#box-2 {
  flex: 1 1 150px;
}

重新排列 Rearrange

order 属性告诉 CSS flex 容器里子元素的顺序。默认情况下，项目排列顺序与源 HTML 文件中顺序相同。这个属性接受数字作为参数，可以使用负数。

#box-1 {
  order: 2;
}
#box-2 {
  order: 1;
}

子元素对齐方式 Align

align-self。这个属性允许调整单个子元素自己的对齐方式，而不会影响到全部子元素。因为 float、clear 和 vertical-align 等调整对齐方式的属性都不能应用于 flex 子元素，所以这个属性显得十分有用。

align-self 可设置的值与 align-items 的一样，并且它会覆盖 align-items 所设置的值。

#box-1 {
  align-self: center;
}
#box-2 {
  align-self: flex-end;
}

CSS flexbox宽度100％Firefox

我在Firefox中遇到了这种情况的问题. #pager获取其子项的宽度.但是,在Chrome中,它需要其父级的宽度.如何在Firefox中使#item-list尊重其父级的宽度？

看一看！ https://jsfiddle.net/owmpatbh/2/

HTML：

<div id="wrapper">
  <div id="sidebar"></div>
    <div id="main">
      <div id="content">
        <p id="stuff">blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>            
      </div>
      <div id="pager">
          <div id="item-list">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
              <div></div>
          </div>
      </div>
   </div>
</div>

CSS：

#wrapper {


 display: flex;
  width: 100%;
  height: 100%;
}

#sidebar {
  overflow: auto;
  flex: 0.25;
  border:3px solid green;
  min-height: 200px; 
}

#main {
  display: flex;
  flex: .75;
  flex-direction: column;
  border:3px solid orange;
}

#content {
  position: relative;
  width: 100%;
  flex: 0.85;
  border: 3px solid blue;
}

#pager {
  display: flex;
  position: relative;
  width: 100%;
  background-color: #fff;
  border: 3px solid pink;
  flex: 0.15;
}

#item-list {
  border: 1px solid black;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: Nowrap;
}

.item {
    display: inline-block;
    padding: 5px;
    width: 200px;
    height: 200px;
    background-color: red;
}

#stuff {
    height: 200px;
}

*{
    margin: 3px;
}

解决方法

firefox的对象#item-list的宽度有问题.我想不出别的什么,那么这是一个错误,至少铬在宽度上不那么挑剔.所以,你需要做的是给它一个固定的宽度,如redbmk所说.所以这是解决方案：

将#item-list位置设置为绝对值,并将其宽度设置为100％(在示例中减去div的边框).

#pager {
  display: flex;
  position: relative;
  background-color: #fff;
  border: 3px solid pink;
  height:246px;
}

#item-list {
  border: 1px solid black;
  position:absolute;
  width: calc(100% - 9px);
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: Nowrap;
}

我还在代码中更改了一些小的(不是很重要的东西).

看到这里：

Jsfiddle

干杯!

关于css – 设置自动边距时,停止flexbox折叠子宽度和css外边距折叠的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于CSS / Flexbox：与最大元素相同的宽度,如列、CSS Flexbox、CSS Flexbox 布局、CSS flexbox宽度100％Firefox等相关知识的信息别忘了在本站进行查找喔。

本文标签：