Задача FlexBox
unknown
plain_text
3 years ago
3.8 kB
1
Indexable
<!DOCTYPE html> <html> <head> <title>Блокове с Flexbox</title> <!-- 1контейнер и да съдържа 2 и 3,като в класа на първия освен baseblocks до него с интервал и горния контейнер --> <style> .BaseBlocks { width: 700px; margin: 0 auto; padding : 0; } #block1 { background: aqua; } #block2 { background: brown; } #block3 { background: burlywood; } #block4 { background: gainsboro; } #block5 { background: coral; } #block6 { background:brown; } #block7 { background: burlywood; } span { font-weight: bold; } div[id] { text-align: center; padding: 10px; } .inner-block { width:300px; height: 300px; display: inline-grid; } .container { display: inline-block; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } .container1 { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch ; } .center { display: block; margin-left: auto; margin-right: auto; width: 40%; } </style> </head> <body> <div id = "block1" class="baseBlocks container"> <span>блок 1</span> <div id ="block2" class="inner-block"> <span>Блок 2</span> <img src="C:\Users\stefc\OneDrive\Работен плот\School\12 КЛАС\Информационни\Нова папка\Site\blocks\resources\image1.jpg" alt="" height="280" width="300"> </div> <div id ="block3" class="inner-block"> <span>Блок 3</span> <h1>Thai Style Home Wabi Sabi</h1> <img src="C:\Users\stefc\OneDrive\Работен плот\School\12 КЛАС\Информационни\Нова папка\Site\blocks\resources\image2.jpg" alt="" width="300" > </div> <div id ="block4" class="BaseBlocks container1"> <span>Блок 4</span> <div id ="block5" class="inner-block"> <span>Блок 5</span> <h1>Projects</h1> <img src="C:\Users\stefc\OneDrive\Работен плот\School\12 КЛАС\Информационни\Нова папка\Site\blocks\resources\image3.jpg" alt="" class="center" > </div> <div id="block6" class="inner-block"> <span>Блок 6</span> <h1>Awards</h1> <img src="C:\Users\stefc\OneDrive\Работен плот\School\12 КЛАС\Информационни\Нова папка\Site\blocks\resources\image4.jpg" alt="" class="center" > </div> <div id="block7" class="inner-block"> <Span>Блок 7</Span> <h1>Our Team</h1> <img src="C:\Users\stefc\OneDrive\Работен плот\School\12 КЛАС\Информационни\Нова папка\Site\blocks\resources\image5.jpg" alt="" class="center"> </div> </div> </body> </html>
Editor is loading...