相关疑难解决方法(0)

考虑flex容器的主轴和横轴:

                                                                                                                       ^{资料来源:W3C}

要沿主轴对齐flex项,有一个属性:

• justify-content

要沿横轴对齐flex项,有三个属性:

• align-content
• align-items
• align-self

在上图中,主轴是水平的,横轴是垂直的.这些是Flex容器的默认方向.

但是,这些方向可以很容易地与flex-direction财产互换.

/* main axis is horizontal, cross axis is vertical */
flex-direction: row;
flex-direction: row-reverse;

/* main axis is vertical, cross axis is horizontal */    
flex-direction: column;
flex-direction: column-reverse;

(横轴始终垂直于主轴.)

我在描述轴的工作方式时的观点是,任何一个方向似乎都没有什么特别之处.主轴,横轴,它们在重要性方面都是相同的,并且flex-direction可以方便地来回切换.

那么为什么横轴有两个额外的对齐属性呢？

为什么align-content并且align-items合并为主轴的一个属性？

为什么主轴没有justify-self属性？

这些属性有用的场景:

• 将flex项放在flex容器的角落
  #box3 { align-self: flex-end; justify-self: flex-end; }

• 制作一组flex项目align-right(justify-content: flex-end)但是让第一个项目对齐left(justify-self: flex-start)

  考虑带有一组导航项和徽标的标题部分.随着justify-self徽标可以左对齐,而导航项目保持最右边,整个事物平滑地调整("弯曲")到不同的屏幕尺寸.

• 在一排三个柔性物品中,将中间物品粘贴到容器的中心(justify-content: center)并将相邻的物品对齐到容器边缘(justify-self: flex-start …

align-self

在以下代码中,align-self使用flex-wrap: nowrap.

flex-container {
  display: flex;
  flex-wrap: nowrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: 5px;
  background-color: lightgreen;
}
flex-item:last-child {
  align-self: flex-end;
  background-color: crimson;
}

<flex-container>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
  <flex-item></flex-item>
</flex-container>

但是当容器切换到时flex-wrap: wrap,align-self属性会失败.

flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 250px;
  height: 250px;
  background-color: silver;
}
flex-item {
  flex: 0 0 50px;
  height: 50px;
  margin: …

我有一个webapp,我使用flexbox进行布局.

我试图填充屏幕(它是一个应用程序,而不是文档),并尽可能不指定任何固定的宽度或高度,因为内容可能是各种各样的事情(完全流畅的布局!梦想!)

所以我需要流体高度,全宽页眉和页脚,然后在中间的主面板填充剩余的垂直空间,分成列,每个列在太高时滚动,并且每个非主列的宽度应缩小适合其内容,以及占用剩余空间的主要列.

我是如此接近,但不得不求助于显式调整非主要列 - 我相信flex-basis: content;应该这样做但是浏览器还不支持.

这是一个显示固定大小列的最小演示:

var list = document.querySelector('ul')

for (var i = 0; i < 100; i++) {
  var li = document.createElement('li')
  li.textContent = i
  list.appendChild(li)
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
main {
  display: flex;
  flex-direction: row;
  overflow: hidden;
}
main > section {
  overflow-y: auto;
  flex-basis: 10em;
  /* Would be better if it were fluid width/shrink to fit, …

在下面的例子中,我有一个按钮,其中包含以下样式...

.button-flexbox-approach {
    /* other button styles */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 2rem;
}

http://codepen.io/3stacks/pen/JWErZJ

但它会自动缩放到100%而不是内容的宽度.您可以设置显式宽度,但这样就不允许文本自然换行.

如何创建一个内部文本以flexbox为中心但不会增长到适合容器大小的按钮？

.container {
  width: 100%;
  height: 100%;
}

.button {
/*   Simply flexing the button makes it grow to the size of the container... How do we make it only the size of the content inside it? */
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
  border-radius: 0;
  border-style: solid;
  border-width: 0;
  cursor: pointer;
  font-weight: normal;
  line-height: normal;
  margin: 0; …

我在创建一个flexbox响应网格时遇到了问题,并希望有人可以指出我正确的方向.

我希望所有的.blockdiv都是相同的高度,并且.bottomdiv绝对位于底部.这实际上是在当前的解决方案中工作,但是当h2标题太长并且达到2 h2行时,我希望行的所有标题都是相同的高度.

这有可能吗？

我做了一个Codepen来说明问题:http://codepen.io/kenvdbroek/pen/eZKdEQ

h1,
h2,
h3 {
  margin: 0;
}
body {
  margin: 0;
  padding: 0;
}
ul.clean-list {
  margin: 0;
  padding: 0;
}
ul.clean-list li {
  list-style: none;
  margin-bottom: 5px;
}
li:last-child {
  margin-bottom: 0;
}
.container {
  padding-top: 50px;
}
.block {
  margin-bottom: 30px;
  border: 1px solid red;
}
.block > .bottom {
  border: 1px solid blue;
}
@media only screen and (min-width: 480px) { …

我想在 Flexbox 内保持 5/3 的纵横比。我希望盒子占屏幕高度的 33%，并且我想将其中两个盒子堆叠在一起，并使用 Flexbox 将 Flex-Direction 设置为Column。这似乎打破了纵横比。如果我设置宽度，它会再次起作用。有没有一种方法可以在不使用 JavaScript 计算宽度的情况下做到这一点？我应该做点别的事情吗？

这是一个演示该问题的代码笔。 https://codepen.io/voxlz/pen/WNjPoqY

html:

<div class='parent'>
  <div class='child'></div>  
  <div class='child'></div>  
  <div class='child'></div>
</div>

CSS：

.parent {
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.child {
  flex-grow: 0;
  
/*   this works v, aspect perserved */
/*   width: 200px; */
  
/*   this does not v */
  height: 200px; 
  
  aspect-ratio: 5/3;
  background-color: blue;
}

我试图根据内容设置每个项目的宽度，但到目前为止我已经将宽度一直设置为可用空间。flex: 0 0 auto 似乎并不能解决问题。我究竟做错了什么？

目标是根据内容大小设置宽度。

[Hello]
[Hello world]

现在

[Hello                   ]
[Hello world             ]

https://jsfiddle.net/v6cgLjbd/8/

<span class='box'>
  <span class='item'>Hello</span>
  <span class='item'>Hello World</span>
  <span class='item'>Hello lOOOOONG text</span>
</span>

.box {
  height: 200px;
  width: auto;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

.item {
  background-color: gray;
  flex: 0 0 auto;
  width: auto;
}

我已经创建了一排项目并使用flex进行了高度匹配.然而,当我只想让它成为自动宽度时,这会导致我在项目中的链接变为全宽.我已经尝试过设置它,display: inline-block但这还没有解决它.

这是一个小提琴:https://jsfiddle.net/v0o2z9g3/2/

.row {
  display: flex;
  flex-direction: row; }

  .col {
    display: flex;
    flex-direction: column;
    padding: 0 0 15px 0;
    margin: 0 19px 65px;
    width: calc((100% / 3) - 38px);
    background: red; }
    .col .resource-item__title {
      font-weight: bolder; }
      .col .resource-item__summary {
        margin: 0 0 5px 0; }
        .col .resource-item__link {
          display: inline-block;
          background: yellow;
          margin-top: auto; }
          .col .resource-item__icon {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            color: green;
            font-size: 22px;
            cursor: default; } …

我想有呈现弯曲的孩子inline-block,这样border-bottom是下li的宽度,而不是容器的宽度.

显然flex儿童不能设置为内联块？

这个问题有解决方法吗？

.menu {
  display: flex;
  flex-flow: column;
  list-style: none;
  padding: 0;
}
.menu > li {
  display: inline-block;
  margin-bottom: 1rem;
  border-bottom: 3px solid black;
}

<ul class="menu">
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

https://codepen.io/joshuajazleung/pen/EbwZmJ

我正在使用 flex 进行样式设置，并且对子元素的宽度有疑问。在我的 JS Fiddle 示例中，如果您查看“灵活取消”药丸徽章......右侧有很多空白区域。如何更新 Flex 样式，以使药丸徽章的宽度没有多余的空白？看起来这个子元素的宽度正在扩展到其父元素的整个宽度......

JS 小提琴：https://jsfiddle.net/a76bdLvp/1/

代码重点领域（来自 JS Fiddle）：

.left-column {
   padding: 12px 12px 12px 16px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
   -webkit-box-flex: 1;
   flex: 1 1 0px;
}

.pill-badge {
   margin-bottom: 4px;
   display: flex;
   align-items: flex-start;
   flex-direction: column;
}

当前结果

期望的结果

我回顾了这个例子，它看起来非常相似......但是应用这个解决方案（或 inline-flex 到子级）不起作用。我非常感谢你的帮助！

使弹性项目采用内容宽度，而不是父容器的宽度

我有以下结构,我想了解为什么我的行不会随其内在内容而增长.

.row {
  border:solid red;
  display: flex;
  flex-direction: row;
}


.cell {
  border: solid green;
  flex: 0 0 400px;
}

<div class="row">
  <div class="cell">
   cell 1
  </div>
  <div class="cell">
   cell 2
  </div>
  <div class="cell">
   cell 3
  </div>
</div>

的jsfiddle

我不希望细胞生长或收缩,它们应该总是400px宽.父进程应该增长并溢出窗口,并且预计会出现水平滚动条.

在上面的示例中,红色边框应位于绿色边框周围.绿色边框具有预期尺寸,而不是红色边框.

出于与我的用例相关的可维护性原因,我不想为我的行设置静态宽度.

我对非flexbox解决方案持开放态度(参见内联块尝试),但会更喜欢一个flexbox(因为我需要align-items: center行上的行为)