fill the entire width of a div

Here is my code:

.row {
  width: 800px;
}

.menu {
  display: inline-block;
  display: flex;
  list-style: none;
  padding: 0;
}

li {
  width: 100%;
}

.test {
  width: 800px;
  background-color: red;
}

<div class="row">
  <ul class="menu">
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
  </ul>
</div>
<div class="test">
  <p>&nbsp;</p>
</div>

I want the menu to fill the full width of the div. The distances are the same and the elements are to coincide with the edges of div test.

This is what it would look like:

Test

Best Regards and Thank You

CodePudding user response：

justify-content is what you probably look for : see https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content

This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

demo

.row {
  width: 800px;
}

.menu {
  display: flex;
  list-style: none;
  padding: 0;
  justify-content:space-between;
}


.test {
  width: 800px;
  background-color: red;
}

<div class="row">
  <ul class="menu">
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
  </ul>
</div>
<div class="test">
  <p>&nbsp;</p>
</div>

CodePudding user response：

.row {
  width: 800px;
  overflow-x: hidden;
}

.menu {
  display: inline-block;
  display: flex;
  list-style: none;
  width: 100%;
  padding: 0;
}

li {
  width: 100%;
  text-align: center;
}

.test {
  width: 100%;
  background-color: red;
}

<div class="row">
  <ul class="menu">
    <li>Test</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
  </ul>
  <div class="test">
     <p>&nbsp;</p>
  </div>
</div>

Try this