CODEWITHSUNDEEP
cssflexbox
johnny
johnny

Reputation: 19745

For layouts, is width and height done the same way with Flexbox as the regular Box Model?

Something I don't understand: If I created a layout with the Box Model, I have my divs and floats, etc., and I have the height and widths.

Is height and width still done the same way using the Flexbox model in CSS3? Am I still required to do things like this in Flexbox:

#left-column{
    background-color:#e9ece5;
    width:180px;
    /*float:left;*/
    height:700px;
}
#right-column{
    background-color:#0ff;
    width:180px;
    /*float:right;*/
    height:700px;

}
#middle-column{
    background-color:#fff;
    margin-left:180px;
    margin-right:150px;

}

Upvotes: 1

Views: 39

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

First of all, I would think about your markup. The content should drive the markup, so left and right are dangerous because they are not really semantic or descriptive of what those area actually are - and they may not always be on the left. That being said, I still named them 'columns' so I could style them as a group, and then gave them each specific classes to target those individually.

Almost always, height should be determined by the content, because maybe a CMS will be used and the copy may change length.

Width however, needs to be set with flex-box. Here is an example of a responsive layout and hopefully it will spotlight both those points.

https://jsfiddle.net/sheriffderek/f2k98f8L/ (make sure you resize the example's view area to see the change between break-points)


markup

<section class="this-section">

  <div class="column sidebar">
    column sidebar
    <ul>
      <li>example length</li>
      <li>example length</li>
      <li>example length</li>
      <li>example length</li>
    </ul>
  </div>

  <div class="column main">
    column main
  </div>

  <div class="column extra">
    column extra
  </div>

</section>


Styles

.this-section {
  display: flex;
  flex-direction: column; /* start out like this for small screens */
}

.column {
  /* width: 100%; already taken care of by flex-direction: column */
  padding: 1rem;
}

.sidebar {
    background: red;
    order: 2; /* flex-order... */
}
.main {
    background: lightblue;
    order: 1;
}

.extra {
    background: yellow;
    order: 3;
}

@media (min-width: 700px) {

  .this-section {
    flex-direction: row;
    max-width: 960px; /* bad example */
    margin: 0 auto;
  }

  .sidebar {
      order: 1;
      width: 20%;
  }
  .main {
      order: 2;
      width: 60%
  }

  .extra {
      /* order: 3; already at 3 */
      width: 20%;
  }

}

You can also set explicit widths to some of the columns... like 231px... and get the other columns to fill in the space.

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

Upvotes: 1

Related Questions