css flex

css flex

.block1{

  display: flex;                
  flex-direction: row;
  justify-content:space-around; /* выравнивание по главной оси */
  align-items: stretch;         /* выравнивание по поперечной оси. */

  flex-wrap: wrap;              /* Многострочная организация блоков */
  align-content: flex-start;    /* каким образом образовавшиеся ряды блоков будут выровнены */
}
.item{
	flex: 0 1 auto;   /* 0 1 auto  по умолчанию   растянуть/сузыить/минимум */
	flex-grow: 0;			/* относительное размеры (по умолчанию 0===минимум места)(ламает justify-content) */
	flex-shrink:1; 		/* возможное уменшение (по умолчанию 1===минимум места) */
	flex-basis:auto; 
	order: 1;					/* 0 (по умолчанию)  порядок */
}



/*========================================================
		*		в калонки
========================================================*/
.con{
  overflow:hidden;
  position:relative;
  height:700px;
  display:flex;
  flex-direction:column;
    // align-content: center ;    
  // align-items:flex-start ;  
  //   justify-content:space-around; 
    flex-wrap:wrap;
  background:#b93;
  .item{
    box-sizing: border-box;
    display:flex;
    align-content:center;
    max-width:50%;
    overflow:hidden;
height:auto;
      -webkit-flex: 1 auto;
  flex: 1 auto;
  margin: 5px;
  padding: 5px;
    background :#aa6;
    word-wrap: break-word; 
    img{
      margin: 0 auto;
        max-width:150px;
  max-height:150px;
    }
  }
}



<div class="block1">
  <div class="item">tetwetwetewtwet</div>
  <div class="item">tetwetwetewtwet</div>
  <div class="item">tetwetwetewtwet</div>
  <div class="item">tetwetwetewtwet</div>
  <div class="item">tetwetwetewtwet</div>
  <div class="item">tetwetwetewtwet</div>
  <div class="item">tetwetwetewtwet</div>
  <div class="item">tetwetwetewtwet</div>
  <div class="item">tetwetwetewtwet</div>
</div>