How to Pull Items in Flexbox

Can I pull items in flexbox?

Use display: flex along with margin-left: auto for the 4^th child element

<main>
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
</main>

Css

main {
  display: flex; 
}

div {
   width: 12%;
   margin: 0 10px;
   border: 1px red solid;
}

div:nth-child(4) {
  margin-left: auto;
}

Codepen: http://codepen.io/anon/pen/wKvMOw

---

Output:

CSS3 Flex: Pull child to the right

Simple fix, use an auto-adjusting margin:

ul li:last-child {
    margin-left: auto;
}

You may also want to not use width: 100% so that the element stays inside the visible area:

ul {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    /* width: 100%; */
    height: 100px;
    background: #333;
    padding: 15px;
}

http://jsfiddle.net/dwLHE/

See also https://www.w3.org/TR/css-flexbox-1/#auto-margins

is it possible to pull out a flex-item in the middle and stretch it to 100% width as a secondary row in html on resize?

Use flex-basis: 100% to make your item full width, and order: 1 to place it after all the other items in the container. In the snippet below I've set this to happen on devices smaller than 500px:

.flex-container {  display: flex;  flex-wrap: wrap;}
.item {  flex: 1;  outline: 1px dashed tomato;  text-align: center;}
@media only screen and (max-width: 500px) {  .item-b {    flex-basis: 100%;    order: 1;  }}

<div class="flex-container">  <div class="item item-a">a</div>  <div class="item item-b">b</div>  <div class="item item-c">c</div>  <div class="item item-d">d</div>  <div class="item item-e">e</div></div>

Make items in a flexbox take up all vertical and horizontal space

Apply align-content: space-between to your flexbox to do that (this assumes of course that you have sufficient available space for the vertical alignment)- see demo below:

The align-content property modifies the behavior of the flex-wrap
property. It is similar to align-items, but instead of aligning flex
items, it aligns flex lines.
(Source: W3schools)

div.container {  width: 405px;  height: 405px;  background: rgba(0, 0, 0, 0.1);  display: flex;  flex-wrap: wrap;  justify-content: space-between;  align-content: space-between;}div.container div.photo {  width: 180px;  height: 180px;  overflow: hidden;  border-radius: 5px;}img {  height: 100%;}

<div class="container">  <div class="photo">    <img src="https://placehold.it/180">  </div>  <div class="photo">    <img src="https://placehold.it/180">  </div>  <div class="photo">    <img src="https://placehold.it/180">  </div>  <div class="photo">    <img src="https://placehold.it/180">  </div></div>

How do I get items to stack in Flex?

The display: flex; setting needs to be applied to the container/parent element, not to the flex-items/children.

Since you have a structure of .container as a container for items and #scissor_win, and items again contains three items-to-be stacked, the CSS rules should (partly) look like this:

.container {
  display: flex;
  flex-direction: column;
}
.items {
  display: flex;
  flex-direction: column;
}

The single items don't need display: flex, unless you want to center their contents using flex.

How to display 3 items per row in flexbox?

Flex container:

• You probably want to use display: flex not inline-flex.
• Add flex-wrap: wrap to allow wrapping onto multiple lines.
• Remove width: 33% if you wish it to take entire space avaiable.

For 3 items per row, add on the flex items:

• flex-basis: 33.333333%
• You can also use the flex's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333%.

.serv ul {  display: flex;  flex-wrap: wrap;  padding-left: 0;}
.serv ul li {  list-style: none;  flex: 0 0 33.333333%;}

<div class="serv">  <ul>    <li>1</li>    <li>2</li>    <li>3</li>    <li>4</li>    <li>5</li>    <li>6</li>  </ul></div>

Is there a way to get two flexbox items within a row to stack as a column?

You are going for a more complex layout than what one level of flexbox can do. A couple of options come to mind:

You can give the third cell in that row display: flex; flex-direction:column and then nest the smaller divs inside it.

Or, you can use grid instead of flex. Then you can arrange it three columns, but set certain cells to span multiple columns or rows as you wish. For example:

.wrapper {
  display: grid;
  grid-template-columns: max-content 1fr 1fr;
}

.stars {
  grid-column: span 3;
}

.left, .middle {
  grid-row: span 2;
}

How can I align one item right with flexbox?

To align one flex child to the right set it withmargin-left: auto;

From the flex spec:

One use of auto margins in the main axis is to separate flex items
into distinct "groups". The following example shows how to use this to
reproduce a common UI pattern - a single bar of actions with some
aligned on the left and others aligned on the right.

.wrap div:last-child {
  margin-left: auto;
}

Updated fiddle

.wrap {  display: flex;  background: #ccc;  width: 100%;  justify-content: space-between;}.wrap div:last-child {  margin-left: auto;}.result {  background: #ccc;  margin-top: 20px;}.result:after {  content: '';  display: table;  clear: both;}.result div {  float: left;}.result div:last-child {  float: right;}

<div class="wrap">  <div>One</div>  <div>Two</div>  <div>Three</div></div>
<!-- DESIRED RESULT --><div class="result">  <div>One</div>  <div>Two</div>  <div>Three</div></div>

---

Related Topics