flex

by Abdul Ahmad

HTML

<div class='flex-col'>
        <div class='item one00'>
        100
        </div>
        <div class='item auto'>
        auto
        </div>
        <div class='item one00'>
        100
        </div>
      </div>
<div class='space'></div>
<div class='content'>
  <div class='flex-box'>
    <div class='item one00'>
      <div class='flex-col'>
        <div class='item one00'>
        100
        </div>
        <div class='item auto'>
        auto
        </div>
        <div class='item one00'>
        100
        </div>
      </div>
    </div>
    <div class='item one00'>
      
    </div>
    <div class='item one00'>
      
    </div>
    <div class='item one00'>
      
    </div>
    <div class='item one00'>
      
    </div>
    <div class='item one00'>
      
    </div>
    <div class='item one00'>
      
    </div>
    <div class='item one00'>
      
    </div>

  </div>
</div>

CSS

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
}
.space {
  height: 5px;
}
.content {
  width: 99%;
  margin: 0 auto;
}
.flex-box {
  display: flex;
  height: 300px;
  background-color: white;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: space-around; /*space-around, space-between*/
  align-items: stretch;
}
.flex-box .item {
  height: 100%;
  border: 1px solid #ccc;
}
.flex-box .item.one00 {
  width: 100px;
}
.flex-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.flex-col .item {
  border: none;
  border-bottom: 1px dotted #ccc;
}
.flex-col .item.one00 {
 
}
.flex-col .item.auto {
  background: gold;
  flex: 1;
}