Align items using flex

Question

I have a requirement as shown below:

|[]                  [][]|

One element at left side of the viewport and two elements on right side of the viewport. To learn display: flex, I am trying this layout without wrapping the elements.

Is this layout possible with flexbox?

Here is the HTML:

<div class="parent">
    <div class="child child--left"></div>
    <div class="child child--right"></div>
    <div class="child child--right"></div>
</div>

I tried using align-items and align-self but no use. Please help.

CSS:

.parent{
     display: flex;  // flexbox
}

score 4 · Accepted Answer · answered Jun 15 '16 at 09:42

4

You can use margin-left:auto in the div you need in the right side:

.parent {
  display: flex;
  height: 100px;
  width: 100%;
}

.child {
  flex: 0 0 20px;
  border: solid 1px green;
}

.child--right {
  margin-left: auto;
}

<div class="parent">
  <div class="child"></div>
  <div class="child child--right"></div>
  <div class="child"></div>
</div>

answered Jun 15 '16 at 09:42

nice. where have you seen this trick? I am just asking so that I can learn more about it. Thanks. – Mr_Green Jun 15 '16 at 09:47
1

Here, in stackoverflow: http://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties – Jun 15 '16 at 09:50
arghh.. so my post is duplicate. Should have searched better. Anyway thanks :) – Mr_Green Jun 15 '16 at 09:52
I could not remember where I had seen, I thought it was css-trick but was here – Jun 15 '16 at 09:55

score 1 · Answer 2 · answered Jun 15 '16 at 09:38

1

you need to use a spacer defined as flex:auto; in order to align the flex-boxes as intended: DEMO

CSS

.parent{
  display:flex;
}
.spacer{
  flex:auto;
}

and your HTML would be:

<div class="parent">
    <div class="child child--left"></div>
    <div class="spacer"></div>
    <div class="child child--right"></div>
    <div class="child child--right"></div>
</div>

answered Jun 15 '16 at 09:38

Amin Jafari

7,047
2
17
42

Thanks, this is nice. I will use this in my project. but I felt blonfu's answer is good because it handles in css. +1'ed :) – Mr_Green Jun 15 '16 at 09:48
you're welcome, this is what I always use in my projects – Amin Jafari Jun 15 '16 at 09:51

score 0 · Answer 3 · answered Jun 15 '16 at 09:41

You can use flex to fill a space

body {
  margin: 0;
}

.flex {
  display: flex;
  background: purple;
  width: 100%;
  height: 75px;
}
.item {
  background: orange;
  width: 50px;
  height: 50px;
  margin: 12.5px;
}
.filler {
  flex-grow: 1;
}

<div class="flex">
  <div class="item"></div>
  <div class="filler"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

You'll notice I've added a div with the class filler and set it to have flex-grow: 1; This means that div will always take up the remaining space.

score 0 · Answer 4 · answered Jun 15 '16 at 09:43

0

Applying: margin-<direction>: auto on the child of a flex item will essentially float the item in the opposite direction (with none of the complications of float).

.child--right {
  margin-left: auto;
}

answered Jun 15 '16 at 09:43

JackHasaKeyboard

1,473
1
16
29

score 0 · Answer 5 · edited Jun 15 '16 at 10:05

0

A way to do this without using an extra filler element is to use auto-margins.

CSS

.child--left {
    margin-right: auto; /* <== here's the auto margin */
}

It will add a margin to the right of .child--left which will fill up the available space within .parent (essentially acting like there's a filler element between the left and right children, but actually without the filler element)

edited Jun 15 '16 at 10:05

Qwertiy

17,208
13
50
117

answered Jun 15 '16 at 09:49

Arnelle Balane

5,272
1
26
31

score -1 · Answer 6 · answered Jun 15 '16 at 09:44

HTML

   <div class="parent">
        <div class="child child--left"><div class="box"></div></div>
        <div class="child child--right"><div class="box"></div></div>
        <div class="child child--right"><div class="box"></div></div>
    </div>

css

   .parent{
      display: flex;
      justify-content: center;
    }

    .box{
      width: 200px;
      height: 200px;
      background: #333;
      margin: 20px
    }

Source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Fiddle: https://jsfiddle.net/rittamdebnath/315wps5g/

Align items using flex

6 Answers6

HTML

css