All geek questions in one place

CSS: Flexbox inside Flexbox

I played a bit with flexboxes and wanted to combine a container of columns and rows. I have a question:

Why don't row elements placed inside a column cover the full width of a flexible container?

Sample code is shown here: js fiddle

HTML:

/* CSS: */

.flex-container {
  color: blue;
  background-color:yellow;
  text-decoration: bold;
  text-size: 1em;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.horizontal {
  flex-direction:row;
  background-color: red;
}

.vertical {
  flex-direction:column;
}
<body>
  <div class="flex-container vertical">
  <div class=flex-item>1 </div>
  <div class=flex-item>2 </div>
  <div class="flex-container horizontal" >
    <div class=flex-item>3a </div>
    <div class=flex-item>3b </div>
    <div class=flex-item>3c </div>
  </div>
  <div class=flex-item>4 </div>
  <div class=flex-item>5 </div>
  </div>
</body>
Run codeHide result

Thanks for any help!

+4
source share
2 answers

This is due to how Flexbox works.

Since the container .horizontalis the flexible child itself, it automatically adjusts to the size of other children. Only space resolution for overflowing content that are children of itself .horizontal.

, justify-content: space-between .

, :

.horizontal {
    flex-direction: row;
    background-color: red;
    width: 100%;
}
0

align-items:center; , . - ,

- stretch , .

, @Michael_B, , align-self:center flex, .

.flex-container {
  color: blue;
  background-color: yellow;
  text-decoration: bold;
  text-size: 1em;
  display: flex;
  justify-content: space-between;
}

.horizontal {
  flex-direction: row;
  background-color: red;
}

.vertical {
  flex-direction: column;
}

.flex-item {
  align-self: center;
  /* center each flex item along the cross axis */
  text-align: center;
  /* horizontally center content within flex item */
}
<body>
  <div class="flex-container vertical">
    <div class=flex-item>1 </div>
    <div class=flex-item>2 </div>
    <div class="flex-container horizontal">
      <div class=flex-item>3a </div>
      <div class=flex-item>3b </div>
      <div class=flex-item>3c </div>
    </div>
    <div class=flex-item>4 </div>
    <div class=flex-item>5 </div>
  </div>
</body>
Hide result
+2

Source: https://habr.com/ru/post/1662251/

More articles:


All Articles