Обоснуйте внутренние элементы Flexbox по всей ширине гибкого контейнера

Question

У меня есть Flexbox для навигации по заголовку, логотип выровнен по левому краю, а элементы ul выровнены по правому краю, как в традиционном стиле. И логотип, и навигационные ссылки - это гибкие элементы в полноразмерном Flexbox, и я дал им обоим гибкий: 50%. Раздел навигационных ссылок также представляет собой Flexbox (внутренний Flexbox), который предотвращает укладку меню и, наоборот, ведет себя лучше и отзывчивее.

Когда я применяю justify-content к этому внутреннему Flexbox, ссылки не изменяются, как если бы существовал переопределяющий стиль или свойство не работало во внутреннем текстовом поле. Мне бы хотелось, чтобы навигационные ссылки равномерно разделяли себя на 50% ширины экрана.

Я поиграл с размещением flex: auto на элементах, но при этом не могу удержать его в текущем макете, и я попытался поиграться со встроенными элементами, чтобы посмотреть, смогу ли я удалить какое-либо переопределяющее свойство, но нет сигара.

#nav {
    display: flex;
    flex: 50%;
    align-items: center;
}

#logo {
    margin-right: auto;
    width: 50px;
    height: auto;
}

#links {
    margin-left: auto;
    display: flex;
    justify-content: space-between;
}

#links a {
    text-decoration: none;
}

<nav id="nav">
	<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
	<ul id="links">
		<li><a href="#">Link1<a></li>
		<li><a href="#">Link2<a></li>
		<li><a href="#">Link3<a></li>
		<li><a href="#">Link4<a></li>
	</ul>
</nav>

Answer 1

Вы были довольно близко.Важными изменениями, которые я сделал, было установить ширину #links <ul> на 50% и добавить justify-content: space-between к контейнеру #nav контейнера.Несколько других стилевых изменений в ul, поэтому у него нет поля по умолчанию и отступов, и я думаю, что он ведет себя так, как вы ожидаете сейчас ..

#nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#logo {
  width: 50px;
  flex: 0 0 50px;
}

#links {
  width: 50%;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

#links a {
  text-decoration: none;
}

<nav id="nav">
	<img id="logo" src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png"/>
	<ul id="links">
		<li><a href="#">Link1</a></li>
		<li><a href="#">Link2</a></li>
		<li><a href="#">Link3</a></li>
		<li><a href="#">Link4</a></li>
	</ul>
</nav>

Answer 2

Я думаю, что у вас проблема с flex: 50%; замедлением CSS. Это не в правильном месте. Я переписал HTML, чтобы использовать его правильно и исправил CSS в соответствии с.

Вот модифицированный CSS

 #nav {
            display: flex;
            background: #eee;
        }

        #nav>#logo,
        #nav>#links {
            flex: 50%;
        }
        #logo img {
            width: 50px;
            height: auto;
        }

        #links {
            display: flex;
            justify-content: space-around;
            list-style-type: none;
        }

        #links a {
            text-decoration: none;
        }

 <nav id="nav">
        <div id="logo"><img src="https://pngimage.net/wp-content/uploads/2018/06/logo-placeholder-png.png" /> </div>
        <ul id="links">
            <li><a href="#">Link1<a></li>
            <li><a href="#">Link2<a></li>
            <li><a href="#">Link3<a></li>
            <li><a href="#">Link4<a></li>
        </ul>
    </nav>

Также код доступен на codepen https://codepen.io/mobarak/pen/jRjZxB/