Home>
According to the theory, it should add up to 2 lines, but only one word is transferred
.header__container {
display:flex;
align-items: center;
min-height: 115px;
.header_logo {
padding: 23px 20px 0 0
}
.logo {
flex: 0 1 220px;
}
.logo_item {}
.header_menu {}
.menu {}
.menu_list {
display:flex;
flex-wrap: wrap;
}
.menu_item {
line-height: 115px;
}
.menu__item:hover {
border-bottom: 5px solid#11749e;
}
.menu_link {
font-weight: 800
display: inline-block
line-height: 28 /16 * 100%;
color: #fff;
text-decoration: none;
min-width: 77px;
padding: 015px;
height: 115px;
line-height: 115px;
}
.header_social {}
.social header {
flex: 1 1 auto;
display:flex;
justify-content: flex-end;
}
.social-header_link {
justify-content: flex-end;
margin: 0 30px 0 0;
}
.social-header__link:last-child {
margin: 0;
}
.social-header__fb {}
.social-header__tw {}
.social-header__sk {}
.social-header_in {}
}
<div class='header__container _container'> <div class="header_logo logo"> <a href="#" class="logo__item"><img src="img/first/Logo.png" alt=""></a> </div> <nav class="header_menu menu"> <ul class="menu_list"> <li class="menu_item"> <a href="#" class="menu__link">Home</a> </li> <li class="menu_item"> <a href="#" class="menu__link">Pages</a> </li> <li class="menu_item"> <a href="#" class="menu__link">Features</a> </li> <li class="menu_item"> <a href="#" class="menu__link">Extensions</a> </li> <li class="menu_item"> <a href="#" class="menu__link">Tutorials</a> </li> <li class="menu_item"> <a href="#" class="menu__link">Contact us</a> </li> </ul> </nav> <div class="header_social social-header"> <a href="#" class="social-header__link"><img src="img/first/fb.png" alt="" class="social-header__fb"></a> <a href="#" class="social-header__link"><img src="img/first/tw.png" alt="" class="social-header__tw"></a> <a href="#" class="social-header__link"><img src="img/first/sk.png" alt="" class="social-header__sk"></a> <a href="#" class="social-header__link"><img src="img/first/in.png" alt="" class="social-header__in"></a> </div></div>
sodepen.io/Alex2750/stump/NVvvmgY
Александр Гриценко2022-02-14 11:55:14Related questions
- html : Buttons move to the bottom when increasing the block height via hover?
- html : Stretch the box in the center of the flex container
- html : Max-width doesn't work in nested flexbox
- html : Adaptive layout for flex box
- html : Positioning elements on the site
- css : How to align a heading using flex?
- html : CSS | How do I make a layout like this using FlexBox or media-query?
- HTML. CSS. FlexBox. Buttons do not behave like flex containers
- html : How to make up such an arrangement of blocks (preferably on flexes)?
Post the complete code. Now it is not clear from the description what exactly the problem is, but it is also not clear from the code. I tried to change the width of .menu__list in your code, then the elements inside are normally transferred to the next line.
novvember2022-02-15 09:36:13