Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent flex items from rendering side to side

Tags:

html

css

flexbox

I'm using flexbox to center some items in a block, but I want each item inside to be in its own row. For example, I want the orange square to be above the text, but after using flex it's moved it to the side of the text - does anyone know a way around this please?

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}
<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>
like image 538
NoDachi Avatar asked Mar 10 '17 16:03

NoDachi


People also ask

How do you make flex items not overflow?

To prevent horizontal overflow, you can: Use flex-basis: 0 and then let them grow with a positive flex-grow . Use a positive flex-shrink to let them shrink if there isn't enough space.

How do I keep my flex from wrapping?

Use the flex-nowrap class in Bootstrap 4 to avoid wrapping the flex items.

How do I set margins between Flex items?

To set space between the flexbox you can use the flexbox property justify-content you can also visit all the property in that link. We can use the justify-content property of a flex container to set space between the flexbox.

Which flex property will use to prevent child element to flow out of parent width?

To override this behavior, use min-width: 0 or overflow: hidden .


2 Answers

Add this style:

.inner {
  flex-direction: column;
}

That tells the flexbox to display its children in rows instead of columns. (I know, weird, right?)

Updated Snippet:

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}
<div class="container">
  <div class="inner">
    <div class="square"></div>

    <p>some text</p>
  </div>
</div>
like image 120
Rick Hitchcock Avatar answered Oct 19 '22 23:10

Rick Hitchcock


An initial setting of a flex container is flex-direction: row. This means that whenever you give an element display: flex or display: inline-flex, all children of that element will, by default, line up horizontally.*

You can override this default with flex-direction: column:

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; /* NEW */
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}
<div class="container">
  <div class="inner">
    <div class="square"></div>
    <p>some text</p>
  </div>
</div>

OR, you can stay in flex-direction: row by adding flex-wrap: wrap to the container and giving the children a large enough width (e.g. width: 100%) to force only one item per row.

.container {
  height: 200px;
  width: 200px;
  background: cornflowerblue;
  position: relative;
}

.inner {
  height: 100%;
  position: absolute;
  left: 0;
  width: 100%;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;             /* NEW */
  align-content: center;       /* NEW */
}

.square {
  width: 30px;
  height: 30px;
  background: tomato;
  display: block;
}

/* NEW */
p {
  flex: 0 0 100%;            
  text-align: center;
}
<div class="container">
  <div class="inner">
    <div class="square"></div>
    <p>some text</p>
  </div>
</div>

* Note the term "children". Descendants beyond the children do not participate in flex layout.

like image 41
Michael Benjamin Avatar answered Oct 19 '22 23:10

Michael Benjamin