FlexBox და media query

24-03-2023, 14:57

CSS სტილის ნიმუში

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  color: #fff;
  text-decoration: none;
}
.flex-container {
  border: 10px solid #7f00ff;
  background-color: azure;
}
.flex-item {
  padding: 10px;
  font: 900 60px "Roboto", sans-serif;
  color: #fff;
  text-align: center;
}
.item-1 {
  background-color: red;
}
.item-2 {
  background-color: green;
}
.item-3 {
  background-color: orange;
}
.item-4 {
  background-color: #eb4c42;
}
.item-5 {
  background-color: #8786eb;
}
.item-6 {
  background-color: #a6eb25;
}
.item-7 {
  background-color: #eb1776;
}
.item-8 {
  background-color: blue;
}
.flex-container {
  height: 100vh;
  display: flex;

  //flex-direction: column; //row;
  //flex-flow: column wrap;
  flex-wrap: wrap;
  gap: 15px;

  //justify-content: center; // flex-end; // flex-start;
  //justify-content: space-between;
  //justify-content: space-around;
  //justify-content: space-evenly;
  //align-items: center; //flex-end; //flex-start;
  //align-content: center;
}

.flex-item {
  width: fit-content;
  height: fit-content;
  //flex: 1 1 100px;
  flex-grow: 1;
  //flex-basis: 33.3%;
}
.item-1 {
  // align-self: center;
  // flex-grow: 3;
  // order: 1;
  //flex-shrink: 2;
}
.item-2 {
  //align-self: center;
  //flex-grow: 3;
  // order: 1;
  flex-shrink: 1;
}
.item-3 {
  // align-self: stretch;
  // flex-grow: 2;
  //order: -1;
}

@media screen and (max-width: 650px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-item {
    width: 100%;
  }
}

HTML კოდი

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FlexBox</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item item-1">
        <a href="https://www.w3schools.com/css/css3_flexbox.asp" target="_blanck"
          >1 w3schools</a
        >
      </div>
      <div class="flex-item item-2">
        2 <a href="https://flexboxfroggy.com/">თამაში</a>
      </div>
      <div class="flex-item item-3">3</div>
      <!-- <div class="flex-item item-4">4</div>
      <div class="flex-item item-5">5</div>
      <div class="flex-item item-6">6</div>
      <div class="flex-item item-7">7</div>
      <div class="flex-item item-8">8</div> -->
    </div>
  </body>
</html>

მასალის კარგად ასათვისებლად არის საიტი, სადაც თამაშით გასწავლიან flex-ის თვისებებს: https://flexboxfroggy.com/
ასევე თამაშით შეისწავლით grid-ის თვისებებს: https://cssgridgarden.com/

FlexBox და media query

მსგავსი სიახლე