CSS – 两行 flexbox 布局 – 使一行的宽度由第二行确定。

huangapple go评论58阅读模式
英文:

CSS - two row flexbox layout - having one row's width be determined by the second row's

问题

我有一个相当具体的CSS问题。

请查看codepen,因为几乎所有内容都在那里解释了... 但这里有更多的解释:

目标:
CSS – 两行 flexbox 布局 – 使一行的宽度由第二行确定。

有两行(在一个容器内),它们都有相同的基本flexbox实现 -

{
    width: auto;
    display: flex;
    align-items: flex-start;
}

顶部行包含页面标题,右侧有一个标题,右侧有一张图片。
底部行还包含两个div - 左侧的div具有固定宽度,但右侧的div是流动的,取决于其中的文本内容(从页面加载到页面加载会更改 - 实际上这将是一个长度各异的名称列表)。

目标是通过使用CSS来确定顶行的宽度,由底行决定。但我不知道如何在flexbox中做到这一点。
目前,display:flex的容器div的宽度都是浏览器的100%。

底部行的布局和实现已经确定/需要使用flexbox,但顶行在如何完成它的方式上是灵活的。

我熟悉CSS,知道通常不是这样的,一般来说,宽度是从父容器传递下来的... 所以我甚至不确定这是否可能?如果需要的话,我可以分解并在JS中完成它,但我总是更喜欢纯CSS的解决方案!

任何想法将不胜感激!

英文:

I have a fairly specific CSS issue.

Please look at the codepen, as pretty much everything is explained in there... but here is a bit more explanation:

THE GOAL:
CSS – 两行 flexbox 布局 – 使一行的宽度由第二行确定。

There are two rows (inside a container) that both have the same basic flexbox implementation -

{
    width: auto;
    display: flex;
    align-items: flex-start;
}

The top row houses a page header, with a title on the right, and an image flush right.
The bottom row also houses two divs - the left div has a static width, but the right is fluid, depending on whatever text is inside there (which changes from pageload to pageload - in reality this will be a list of names with varying lengths).

The goal is for the top row's width to be determined by the bottom row, via using CSS. But I have no idea how to do this in flexbox.
Currently the display:flex container divs' widths are both 100% of the browser.

The bottom row's layout and implementation is set in stone / needs to use flexbox, but the top row is flexible in how it is accomplished.

I am familiar with CSS and know this is not usually how it goes, in general width is passed down from the parent container... so I'm not even sure if this is possible? I can break down and do it in JS if needed, but I always prefer a CSS-only solution!

Any thoughts would be greatly appreciated!

答案1

得分: 1

您可以像这样操作。我认为您在代码中只需要在container和两个弹性框之间再添加一层包装层。

<div class="page">
  <div class="container">
    <div class="top">
      在这里放入任何您喜欢的内容
    </div>
    <div class="bottom">
      <div class="bottomLeft">
        这是静态尺寸
      </div>
      <div class="bottomRight">
        <p>
          一些文字和内容<br>
          一些文字和内容<br>
          一些文字和内容<br>
          一些文字和内容<br>
          一些文字和内容<br>
          一些文字和内容<br>
          一些文字和内容<br>
        </p>
      </div>
    </div>
  </div>
</div>

这是您的代码的HTML部分的翻译。

英文:

You can do something like this. I think all you would need to do in your code is add one more wrapper layer between your container and your two flex boxes.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.page{
  display: flex;
  justify-content: center;
  border: 1px solid black;
}

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

.top{
  width: 100%;
  height: 200px;
  background-color: lightgreen;
}

.bottom{
  display: flex;
  gap: 20px;
}

.bottomLeft{
  width: 250px;
  height: 100px;
  background-color: lightblue;
}

.bottomRight{
  min-width: 200px;
  background-color: pink;
}

<!-- language: lang-html -->

&lt;div class=&quot;page&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;top&quot;&gt;
      Put whatever you like in here
    &lt;/div&gt;

    &lt;div class=&quot;bottom&quot;&gt;
      &lt;div class=&quot;bottomLeft&quot;&gt;
        This is statically sized
      &lt;/div&gt;
      &lt;div class=&quot;bottomRight&quot;&gt;
        &lt;p&gt;
          Some words and stuff&lt;br&gt;
          Some words and stuff&lt;br&gt;
          Some words and stuff&lt;br&gt;
          Some words and stuff&lt;br&gt;
          Some words and stuff&lt;br&gt;
          Some words and stuff&lt;br&gt;
          Some words and stuff&lt;br&gt;
        &lt;/p&gt;
        
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;

<!-- end snippet -->

答案2

得分: 0

以下是您要翻译的代码部分:

.container {
  width: auto;
  max-width: 1440px;
  margin: 0 auto;
}

.basicFlex {
  width: auto;
  display: flex;
  align-items: flex-start;
  padding: 0 16px;
  border: 1px grey solid;
}

.pageHeader {
  flex-direction: row;
}
.pageHeader--title {
  flex-grow: 2;
}
img {
  height: 100px;
  margin-left: 20px;
}

.pageContent {
  justify-content: center;
}
.pageContent--staticLeft {
  background: red;
  width: 100%;
  min-width: 220px;
  min-height: 200px;
}
.pageContent--fluidRight {
  background: DeepSkyBlue;
  margin-left: 20px;
  max-width: 822px;
}
<div class="container">
  <div class="pageHeader basicFlex">
    <div class="pageHeader--title">
      这是页面标题!我希望它与红色框的左侧对齐。
    </div>
    <img src="https://rfbi.com.au/wp-content/uploads/Stay-Active-web-icon-100px-x-100px-300x300.jpg"/>
  </div>
  
  <div class="pageContent basicFlex">
    <div class="pageContent--staticLeft">
      <p>目标是使.pageHeader的宽度与.pageContent内部元素的宽度相同(即822px(红色div)+ 20px(间距)+ ???(黄色div的宽度)。</p>
    </div>
    <div class="pageContent--fluidRight">
      <p>根据文本的长度不同(从页面加载到页面加载变化),此div将更宽或更窄。随时进行编辑。文本长度的不同会影响这个div的宽度。</p>
    </div>
  </div>
</div>
英文:

Not super certain if this is what you really want to happen. First you forgot to have closing paragraph. You can contain your 2 elements in a max-width so they can align the way you want them to be. On your pageContent--fluidRight you can try to put a max width on it so the text will wrap on its own. See sample below if this is what you mean and let me know.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
  width: auto;
  max-width:1440px;
  margin: 0 auto;
}

.basicFlex {
  width: auto;
  display: flex;
  align-items: flex-start;
  padding: 0 16px;
  border: 1px grey solid;
}

.pageHeader {
  flex-direction: row;
}
.pageHeader--title {
  flex-grow: 2;
}
img {
  height: 100px;
  margin-left: 20px;
}

.pageContent {
  justify-content: center;
}
.pageContent--staticLeft {
  background: red;
  width: 100%;
  min-width: 220px;
  min-height:200px
}
.pageContent--fluidRight {
  background: DeepSkyBlue;
  margin-left: 20px;
  max-width: 822px;
}

<!-- language: lang-html -->

&lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;pageHeader basicFlex&quot;&gt;
    &lt;div class=&quot;pageHeader--title&quot;&gt;
      Here is the Page Title! I would like for this to be aligned with the left side of the red box.
    &lt;/div&gt;
    &lt;img src=&quot;https://rfbi.com.au/wp-content/uploads/Stay-Active-web-icon-100px-x-100px-300x300.jpg&quot;/&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;pageContent basicFlex&quot;&gt;
    &lt;div class=&quot;pageContent--staticLeft&quot;&gt;
      &lt;p&gt;The goal is for the width of .pageHeader to be the same as the width of only the elements inside .pageContent (ie - 822px (the red div) + 20px (margin between) + ??? (the width of the yellow div).&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class=&quot;pageContent--fluidRight&quot;&gt;
      &lt;p&gt;Depending on how long this text is&lt;br&gt;
        (which varies from pageload to pageload),&lt;br&gt; this div will be wider or more narrow.&lt;br&gt;Feel free to edit. Depending on how long this text isDepending on how long this text isDepending on how long this text isDepending on how long this text isDepending on how long this text isDepending on how long this text is Depending on how long this text isDepending on how long this text isDepending on how long this text is
      
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
&lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月23日 11:19:59
  • 转载请务必保留本文链接:https://go.coder-hub.com/75818985.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定