Перейти к содержимому

___ flex-контейнера

URL youtube источник

Сайт автора

время 1:31

<!DOCTYPE html>
<!-- Мой личный блог страница №1 -->
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <title>My Blog</title>
  <style>
	@import "nullstyle.scss" //Файл обнуляющих стилей
	

	body {
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	}

	.wrapper {
		height: 100%;
		overflow: hudden;
		min-height: 100%;
		padding: 50px;
	}

	.block {
	}
	
	.block_row {
		display: flex; /* flex  inline-flex  */
		justify-content: space-around; /* по горизонтали */ /* flex-start center flex-end  space-between space-around*/
		align-items: center; /* по вертикали */ /* stretch flex-start center flex-end */
	
		border: 20px solid #ece89d; /* обрамлене флекс контейнера */
		margin: 0px 0px 20px 0px;
	}
	
	.block_column {
		border: 20px solid #5e5373;  /* обрамлене каждого флекс элемента */
	}

	.block_item {
		background-color: #18b5a4;  /* содержимое каждого флекс элемента */
		padding: 50px;
		font-size: 14px;
		color: #fff;
		font-weight: 700;
	}
	
	.block__list {
		display: flex;
		align-items: center;
		li{margin: 0px 15px 0px 0px;
			&:last-child{margin: 0px 0px 0px 0px;}
		}
	}
	
	.block__info {
		position: relative;
		padding: 0px 0px 0px 25px;
	}

  </style>
 </head>
 <body> 
 

    <div class="wrapper">
	  <div class="block"> 
		  <div class="block_row"> 
			  <div class="block_column">
				<div class="block_item">
					<img src="image/str_0001_00.png" href="images/p.cbm.ua_1123123.png" alt="">
				</div>
			  </div>
			  <div class="block_column"> 
				<div class="block_item">
					<a href="./str/CSS селекторы.html">CSS селекторы.html <span>!</span></a>
				</div>	
			  </div>
			  <div class="block_column">
				<div class="block_item">
					
				</div>
			  </div>
		  </div>

	  </div>
    </div>
    <ul class="block__list">
		<li>
			<div class="block__info_y">Flex-контейнер</div>
		</li>
		<li>
			<div class="block__info_p">Flex-элемент</div>
		</li>
		<li>
			<div class="block__info_g">содержание Flex-элемент</div>
		</li>

	</ul>
    <br>
  
 
</body>
</html>





align-items: stretch;




















 align-items:  flex-start















align-items:  center















align-items:  end












Метки: