What's the best way to type on flexbox?

D

Dimon3x2019-08-23 22:39:51

css

Dimon3x, 2019-08-23 22:39:51

I am studying flexbox, there are 2 blocks in the header, one block must be pressed to the left and the other to the right and between the paragraphs so that there are indents, I did it, is this code good, how can I do it better?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style>
      ul {
      list-style: none;  
      border: 1px solid;          
      }
      header {
      border: 1px solid;
      }
      header {
      display: flex;
      }
      .left-block ul, .right-block ul {
      display: flex;
      }
      .left-block {
      order: 1;        
      }
      .right-block {
      order: 2;  
      margin-left: auto;      
      }
      .left-block li, .right-block li {
      margin-right: 10px;        
      }
    </style>
  </head>
  <body>
    <header>
      <div class="left-block">
        <ul>
          <li><a href="">Ссылка</a></li>
          <li><a href="">Ссылка</a></li>
          <li><a href="">Ссылка</a></li>
          <li><a href="">Ссылка</a></li>
          <li><a href="">Ссылка</a></li>
        </ul>
      </div>
      <div class="right-block">
        <ul>
          <li><span>Текст</span></li>
          <li><button>Войти</button></li>
          <li><a href="">Ссылка</a></li>
        </ul>
      </div>
    </header>
  </body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

D

Dima Polos, 2019-08-23
@Dimon3x

Order to ask - superfluous.
The divs around the lists are also superfluous, why? :)

<header class="header">
    <ul class="left">
      <li> Item </li>
      <li> Item </li>
    </ul>
    <ul class="right">
      <li> Item </li>
      <li> Item </li>
    </ul>
</header>

.header{
   display: flex;
   justify-content: space-between;
}

Like everything.

B

Brad9aga, 2019-08-23
@Brad9aga

further myself
snippet