代码之家  ›  专栏  ›  技术社区  ›  Chris Barr

如何在flex列之间留出空间并防止内容溢出

flexbox css html
  •  0
  • Chris Barr  · 技术社区  · 1 年前

    我有一个简单的2列flex设置,并且我想要列之间的一些边距。当我这样做时,第二列被推到 .flex-row 。当我使用 <pre> 里面的元素似乎不尊重 max-width: 100% 我已经着手了。

    所以我的问题分为两部分:

    • 如何在不溢出的情况下使用页边空白来分隔弹性列?
    • 我如何控制的大小 <pre> (或其他元素)以适应其容器? 

    *{
  box-sizing: border-box;
}

.container {
  background: #F5F5F5;
  border: 1px solid #CCC;
  margin: 0 auto;
  padding: 0.5rem;
  width: 500px;
}

.flex-row {
  display: flex;
  background: rgba(255,0,0, 0.1);
  padding: 0.5rem 0;
}

.flex-col {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  background: rgba(0,255,0, 0.1);
}

.flex-row .flex-col:last-child {
  margin-left: 0.5rem;
}

pre {
  border: 1px solid red;
  padding: 0.5rem;
  overflow-y: scroll;
  max-width: 100%;
}
    <div class="container">
  <p>Some text in a container</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.</p>
    </div>
    <div class="flex-col">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
      Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis.
      Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</p>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <p>Some text in a container</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.</p>
    </div>
    <div class="flex-col">
      <pre>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat,
aperiam harum asperiores, vel debitis.
Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</pre>
    </div>
  </div>
</div>
    2 回复  |  直到 1 年前
        1
  •  2
  •   InSync    1 年前

    首先,减去的裕度 .flex-col:last-child 来自其 flex-basis 以使其适合其父对象: calc(50% - 0.5rem) 。然后,任意一组 white-space: pre-wrap 或使用 width: 0; min-width: 100%; 技巧: 

    .flex-row .flex-col:last-child {
  flex-basis: calc(50% - 0.5rem);
  margin-left: 0.5rem;
}

pre {
  /* Either */
  white-space: pre-wrap;

  /* or */
  width: 0;
  min-width: 100%;
}

    试试看: 

    .flex-row .flex-col:last-child {
  flex-basis: calc(50% - 0.5rem);
  margin-left: 0.5rem;
}

pre {
  width: 0;
  min-width: 100%;
}


/* Original styles */

* {
  box-sizing: border-box;
}

.container {
  background: #F5F5F5;
  border: 1px solid #CCC;
  margin: 0 auto;
  padding: 0.5rem;
  width: 500px;
}

.flex-row {
  display: flex;
  background: rgba(255, 0, 0, 0.1);
  padding: 0.5rem 0;
}

.flex-col {
  flex-basis: 50%;
  flex-grow: 0;
  flex-shrink: 0;
  background: rgba(0, 255, 0, 0.1);
}

pre {
  border: 1px solid red;
  padding: 0.5rem;
  overflow-y: scroll;
  max-width: 100%;
}
    <div class="container">
  <p>Some text in a container</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
        incidunt.</p>
    </div>
    <div class="flex-col">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis. Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</p>
    </div>
  </div>
</div>

<hr>

<div class="container">
  <p>Some text in a container</p>
  <div class="flex-row">
    <div class="flex-col">
      <p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores
        incidunt.</p>
    </div>
    <div class="flex-col">
      <pre>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat,
aperiam harum asperiores, vel debitis.
Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?</pre>
    </div>
  </div>
</div>

    或者,您可以使用 grid 随着 gap ,虽然没有得到广泛支持,但仍然存在了 about 6 years : 

    .flex-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

    试试看: 

    .flex-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

pre {
  width: 0;
  min-width: 100%;
}


/* Original styles */

* {
  box-sizing: border-box;
}

.container {
  background: #F5F5F5;
  border: 1px solid #CCC;
  margin: 0 auto;
  padding: 0.5rem;
  width: 500px;
}

.flex-row {
  background: rgba(255, 0, 0, 0.1);
  padding: 0.5rem 0;
}

.flex-col {
  background: rgba(0, 255, 0, 0.1);
}

pre {
  border: 1px solid red;
  padding: 0.5rem;
  overflow-y: scroll;
  max-width: 100%;
}
    <div class=“container”>
<p>容器中的某些文本</p>
<div class=“flex row”>
<div class=“flex col”>
<p>列中的某些文本。Lorem ipsum dolor,坐amet consectetur adipiscicing elit。必须在运行时、运行时和运行时进行必要的维护,以确保最低限度的维护?除主要昆虫外,其余均为昆虫科
令人难以置信</p>
</div>
<div class=“flex col”>
<p>Lorem,ipsum dolor坐amet consectetur adipislicing elit。Iste recasandae,reprindus ipsum accusantium rerum dolor fugiat,开胃酒harum asperiores,vel debtis。这是一个智慧的时代。我是谁</p>
</div>
</div>
</div>

<hr>

<div class=“container”>
<p>容器中的某些文本</p>
<div class=“flex row”>
<div class=“flex col”>
<p>列中的某些文本。Lorem ipsum dolor,坐amet consectetur adipiscicing elit。必须在运行时、运行时和运行时进行必要的维护,以确保最低限度的维护?除主要昆虫外,其余均为昆虫科
令人难以置信</p>
</div>
<div class=“flex col”>
<pre>Lorem,ipsum dolor坐amet consectetur adipislicing elit。
Iste recasandae,repellendus ipsum accusantium rerum dolor fugiat,
开胃酒有粗糙的味道,还有苦味。
这是一个智慧的时代。我是谁</pre>
</div>
</div>
</div>
        2
  •  1
  •   DCR    1 年前

    你似乎过于复杂了。 

    .flex-row{
display:flex;
width:500px;
border:solid 1px red;
margin:0 auto;}

.flex-col{
width:45%;
}

.c1{
margin-right:5%;
border:solid 1px green;}

.c2{
margin-left:5%;
border:solid 1px blue;}
    <div class="container">
  <p>Some text in a container</p>
  <div class="flex-row">
    <div class="flex-col c1">
      <p>Some text in a column. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus ea sint placeat deserunt, aut dolor et dolorum itaque, consequuntur minima quibusdam neque? Sequi eaque unde repudiandae, excepturi quibusdam maiores incidunt.</p>
    </div>
    <div class="flex-col c2">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
      Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis.
      Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?
      
      Iste recusandae, repellendus ipsum accusantium rerum dolor fugiat, aperiam harum asperiores, vel debitis.
      Quidem modi sapiente enim. Ipsam saepe blanditiis ipsa id?
      
      </p>
    </div>
  </div>
</div>
    推荐文章
    Luca Phillips  ·  当表是div flex的子级时,它有巨大的空间
    2 年前
    Nishit Agrawal  ·  Flexbox-将第三项与第二项对齐
    2 年前
    alan  ·  有没有办法向flexbox图像添加链接?
    2 年前
    Gary  ·  CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?
    2 年前
    n1234  ·  Flexbox-图像和内容
    6 年前
    nCardot  ·  为什么是!h1元素媒体查询工作所需的重要信息?[副本]
    6 年前
    Adam Olsson  ·  在中心CSS中对齐单个列表项
    6 年前
    London804  ·  我是否可以使设置为对齐内容的元素:换行时间距向右对齐?
    6 年前
    user3137124  ·  当“flex direction”为“column”时,如何将div与顶部对齐?[副本]
    6 年前
    AJ-  ·  无法垂直对齐文本-angularJS+bootstrap+flexbox
    6 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号