Flex direction elements width

Asked Dec 19 '18 at 11:02

Active Dec 19 '18 at 11:04

Viewed 47 times

I do not know why by setting flex-direction to column my elements inside get width to 100%? I just want to make it vertical direction, but not wider. Can I do it without wrapping element in additional div? Please look at example below:

<button class="button">Good width</button>
<div class="flex-content">
  <button class="button">Wrong width</button>
</div>

.button {
  height: 36px;
}

.flex-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  border: 1px solid red;
}

https://codepen.io/anon/pen/QzGQQm

Regards

edited Dec 19 '18 at 11:04

Temani Afif

211,628
17
234
311

asked Dec 19 '18 at 11:02

Sheppard26

3

add `align-items:flex-start` – Temani Afif Dec 19 '18 at 11:05
but now they are not centered – Sheppard26 Dec 19 '18 at 11:09
1

You can add `align-self: center;` to the button element to centre it within its parent. – TomJerrum Dec 19 '18 at 11:14
I gave you a fast fix but you have to do a little effort reading the doc of the property and the duplicate then you will be able to do what you want. Don't simply wait to get a working code to simply copy paste – Temani Afif Dec 19 '18 at 11:19

Flex direction elements width

0 Answers0