尝试最多包含5个项目且少至3个的flexbox导航,但它并未在所有元素之间平均分配宽度.

小提琴

我正在建模的教程是http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

上海社会科学院

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
} …

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？

我不能用overflow-x: hidden.

的jsfiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div> …

我在flexbox中有两个div并排.右手应该总是相同的宽度,我希望左手一个只抓住剩余的空间.但除非我专门设定其宽度,否则它不会.

所以目前,它设置为96%,看起来没问题,直到你真的挤压屏幕 - 然后右手div有点缺乏它所需的空间.

我想我可以保留它,但它感觉不对 - 就像必须有一种说法:

合适的人总是一样的; 你在左边 - 你得到了剩下的一切

.ar-course-nav {
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does …

想象一下以下布局,其中圆点表示框之间的空间:

[Left box]......[Center box]......[Right box]

当我移除右边的盒子时,我喜欢中心盒仍然位于中心,如下所示:

[Left box]......[Center box].................

如果我删除左框也是如此.

................[Center box].................

现在,当中心框内的内容变得更长时,它将占用尽可能多的可用空间,同时保持居中.左边和右边框将永远不会收缩,因此当没有剩余空间的地方overflow:hidden,并text-overflow: ellipsis会在效果打破了内容;

[Left box][Center boxxxxxxxxxxxxx][Right box]

以上都是我理想的情况,但我不知道如何实现这个效果.因为当我创建一个像这样的flex结构时:

.parent {
    display : flex; // flex box
    justify-content : space-between; // horizontal alignment
    align-content   : center; // vertical alignment
}

如果左右框的大小完全相同,我会得到所需的效果.然而,当两者中的一个来自不同尺寸时,居中的盒子不再真正居中.

有没有人可以帮助我？

更新

A justify-self会很好,这将是理想的:

.leftBox {
     justify-self : flex-start;
}

.rightBox {
    justify-self : flex-end;
}

我需要这个:

容器宽度固定宽度,物品在行方向流动并在末端包裹.

每个项目应该是max-width: 400px,应该削减溢出的内容.项目的最小宽度应由内容决定,但:它不应小于200px.

这是我的CSS代码,它没有涵盖"min-content"方面.w3在他们的flexbox工作草案中建议使用min-content,但在我的情况下它似乎不起作用:

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.container .box {
    -webkit-flex: 1;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    height: 200px;
    background-color: #fafa00;
    overflow: hidden;
}

和HTML是:

<div class="container">
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    <div class="box">
        <table>
            <tr>
                <td>Content</td>
                <td>Content</td>
            </tr>
        </table>    
    </div>
    [...]
</div>

这两个值有什么区别？我已经测试了很多例子,他们只是给出了完全相同的结果......有人可以给我一个例子,其中flex-basis: auto;不会给出相同的结果flex-basis: 0;

在像这样的dom结构中:

<div id="1">
  <div id="2">
    <div id="3">
    </div>
  </div>
  <div id="4">
    <div id="5">
    </div>
  </div>
</div>

用css指定为:

#1{
  display: flex;
  flex-direction: row;
}
#2, #4{
  flex: 1;
}

只要id 3和5中内容宽度的总和不超过id为1的dom的宽度,id为2和4的div就会均匀分布.

当总和超过宽度时,它们不是均匀分布的,而具有更宽内容的一个将占用更多宽度.即使在这种情况下,如何使用flexbox强制2和4占用均匀宽度？

我不想按百分比使用宽度规格.我想坚持使用flexbox.

我有两个并排的面板。右侧的包含物种名称，不应换行（它们足够小，仅占屏幕的一小部分）。左侧面板包含更多内容，并占据了大部分屏幕。这是我的代码。

html,body {
  height: 100%;
}
body {
  display: flex;
  margin: 0;
  overflow-y: hidden;
}
#left {
  background-color: skyblue;
  flex-grow: 1;
  padding: 1em;
}
#right {
  background-color: indianRed;
	white-space: nowrap;
  padding: 1em;
  display: flex;
  flex-direction: column;
}

<div id='left'>
Some text wide enough to compete with the red panel -- some more words needed.
</div>
<div id='right'>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p>
<p>Some names a little larger.</p>
<p>Some names.</p> …

我使用flexboxes来组织页面上的元素.

我希望flexboxes使用所有可用的水平空间,所以我添加flex-grow:1.

然后我希望同一行上的每个项目具有相同的大小(例如,如果有两个项目则为50%,如果有三个则为33%,等等),所以我补充说flex-basis:0.

但在第三步,项目不再包装.如果我更改窗口宽度,则每行的项目数始终保持不变,并且其内容会被挤压.我不希望这样.我希望当一个项目的宽度小于它的内容时,将它放在下一行,因为它在前两个步骤中起作用.我尝试过flex-shrink和其他事情一起玩,没有成功.

我能做什么 ？谢谢 !

回答TL; DR:添加min-width: fit-content作品!

的jsfiddle

由于<p></p>元素占用的空间，第一个图像比其他两个图像宽得多。

我如何确保p包裹在 flex 框的宽度上？

我有一个工作引导。

/* CSS used here will be applied after bootstrap.css */
body { background-color: rgba(20,10,10,.4); }
div.container { background-color: white; }

@media (min-width: 1380px) {
  div.container {
    width: 1400px; } }  
  
div.container section {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  justify-content: space-between; 
}

div.container section div img {
  	width:100%;
}

div.container section div p {
  	width: 100%;
}

div.container section div {
  	border: 1px solid black;
  	flex-grow:1;
}

div.container section div+div { …