CSS

CSS Flex Container

.flex-container {
  display: flex;
}

display:flex

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

display flex css

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
/* A Flexible Layout must have a parent element with the
display property set to flex. Direct child elements(s) of
the flexible container automatically becomes flexible items.   */

css all flex properties

.item {
  flex-basis:  | auto; /* default auto */
}

display flex css

.class {
  display: flex;
}

/* use display: flex to turn CSS element into a flexbox */

display:flex

section {
  display: flex;
}

css flex

.header,
.footer  { flex: 1 100%; }
.sidebar { flex: 1; }
.main    { flex: 2; }

css flex

.even-col > *{width: 100%;}

css flex

<style>
    .flex-container{
        display: flex;
    }
    .flex-item{
        padding:10px;
        border: 1px solid #ccc; 
        margin: 5px
    }
</style>

<div class="flex-container">    
    <div class="flex-item">Item 1 is quite long<div>    
    <div class="flex-item">Item 2<div>    
    <div class="flex-item">Item 3<div>    
    <div class="flex-item">Item 4<div>    
</div>