Question 282061 in CSS Question posted in
Some basic documentation can be found here.

Css – order items that are group of two on display flex

Im trying to make the next grid of elements using flex on desk:

1 2 3
4 5 6

they are group of two items per container like this:

<div class="descriptionElements">
                <div class="itemsContainer">
                    <div class="itemDescription">
                        <div class="descriptionItemSection">
                            <span class="titleItemDescription">item-1</span>
                            <p class="textItemDescription">Description
                            </p>
                        </div>

                    </div>
                    <div class="itemDescription">
                        <div class="descriptionItemSection">
                            <span class="titleItemDescription">item-2</span>
                            <p class="textItemDescription">Description
                            </p>
                        </div>
                    </div>
                </div>
                <div class="itemsContainer">
                    <div class="itemDescription">
                        <div class="descriptionItemSection">
                            <span class="titleItemDescription">item-3</span>
                            <p class="textItemDescription">description
                            </p>
                        </div>
                    </div>
                    <div class="itemDescription">
                        <div class="descriptionItemSection">
                            <span class="titleItemDescription">item-4</span>
                            <p class="textItemDescription">Description
                            </p>
                        </div>
                    </div>
                </div>

Why do this?, be cause on mobile I need to do a different order of items over a slider, something like this:

1 3 5
2 4 6

I know that if I make a simple container with each item, I can order like the first example, but I cannot order like I want on mobile, or yes?

about the slider, im using slick slider

Tags:

2

Answers


  1. 0

    For the CSS in ‘itemsContainer’, include:

    .itemsContainer {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      width: 100%
}
    Login or Signup to reply.
  2. 0

    With standard flexbox this is not possible. However, you could open up the individual wrapper divs with display: contents and then it should work.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.descriptionElements {
  display: flex;
  width: 450px;
  border: 1px solid grey;
  flex-wrap: wrap;
}

.itemsContainer {
  display: contents;
}

.itemDescription {
  width: 33.333%;
  border: 1px solid red;
}
    <div class="descriptionElements">
  <div class="itemsContainer">
    <div class="itemDescription">
      <div class="descriptionItemSection">
        <span class="titleItemDescription">item-1</span>
        <p class="textItemDescription">Description
        </p>
      </div>

    </div>
    <div class="itemDescription">
      <div class="descriptionItemSection">
        <span class="titleItemDescription">item-2</span>
        <p class="textItemDescription">Description
        </p>
      </div>
    </div>
  </div>
  <div class="itemsContainer">
    <div class="itemDescription">
      <div class="descriptionItemSection">
        <span class="titleItemDescription">item-3</span>
        <p class="textItemDescription">description
        </p>
      </div>
    </div>
    <div class="itemDescription">
      <div class="descriptionItemSection">
        <span class="titleItemDescription">item-4</span>
        <p class="textItemDescription">Description
        </p>
      </div>
    </div>






    <div class="itemsContainer">
      <div class="itemDescription">
        <div class="descriptionItemSection">
          <span class="titleItemDescription">item-5</span>
          <p class="textItemDescription">description
          </p>
        </div>
      </div>
      <div class="itemDescription">
        <div class="descriptionItemSection">
          <span class="titleItemDescription">item-6</span>
          <p class="textItemDescription">Description
          </p>
        </div>
      </div>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search