Create a layout using css flexbox to combine row and columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Column

Description

Create a layout using css flexbox to combine row and columns

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>fiddly flexbox layout</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"> 
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> 
  <style id="compiled-css" type="text/css">

body {<!--from w  w w. jav a2s.co  m-->
   font-size: 12px;
}
.game-heading {
   background: #a3a3a3;
}
header {
   display: flex;
}
article {
   display: flex;
}
.scores {
   display: flex;
   flex-wrap: wrap;
   flex: 1;
   line-height: 1;
}
.period {
   background: #c29d31;
   padding: 5px 10px;
   text-align: center;
}
.results {
   display: flex;
   flex-direction: column;
}
.score-nr {
   background: #9E8231;
   flex: 1;
   line-height: 10px;
   padding: 6px;
}
.competitors {
   color: #2d2929;
   flex-direction: row;
   align-items: flex-start;
   float: left;
   flex-grow: 1;
}
.fa {
   align-self: center;
   padding: 10px;
}
.venue-content {
   background: #a3a3a3;
   width: 100%
}
h4 {
   display: inline-flex;
}
.competitor-name {
   padding: 4px;
}
ul li {
   padding: 5px 10px;
}
ul {
   border: 1px solid #808080;
}
.ft-container {
   display: flex;
}
.ft-container ul:last-child {
   display: flex;
   align-items: center;
}


      </style> 
 </head> 
 <body> 
  <section class="container-one-row two"> 
   <h3 class="game-heading">game type </h3> 
   <article class="game-content"> 
    <header class="event-title"> 
     <div class="scores"> 
      <span class="period">Time</span> 
      <div class="results"> 
       <span class="score-nr">5122</span> 
       <span class="score-nr">8213</span> 
      </div> 
      <div class="competitors"> 
       <h3 class="competitor-name">jimmy1234</h3> 
       <h3 class="competitor-name">player98763</h3> 
      </div> 
      <i class="fa fa-arrow-right"></i> 
      <section class="ft-container"> 
       <ul> 
        <li>222 </li> 
        <li>543 </li> 
       </ul> 
       <ul> 
        <li>mid </li> 
       </ul> 
      </section> 
      <div class="venue-content"> 
       <h4>Neutral</h4> 
       <i class=" fa fa-gamepad"></i> 
      </div> 
     </div> 
    </header> 
   </article> 
  </section>  
 </body>
</html>

Related Tutorials