Proste menu w flexbox - problem

pytanie zadane 29 grudnia 2016 w HTML i CSS przez Kuba Bielawski Obywatel (1,760 p.)

Mam problem z flexbox. Muszę ustawić Logo całkowicie po lewej stronie.

Kod html:

<!doctype html>

<html lang="pl">
    <head>
        <meta charset="utf-8">

        <title>Lokalna strona</title>
        <meta name="description" content="XXXX">
        <meta name="author" content="XYZ">

        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link rel="stylesheet" type="text/css" href="css/reset.css">
    </head>
      
    <body>




        <div id="top-flex">
          <h1 class="logo">Logo strony</h1>
          <ul>
            <li><a href="#">Najnowsze</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Kontakt</a></li>
            <li><a href="#">Pomoc</a></li>
          </ul>
        </div>



    </body>





</html>

CSS:

body{
	margin: 0;
}
#top-flex{
	background-color: #292c3b;
	width: 100%;
	height: 70px;
	line-height: 70px;
	display: flex;
	justify-content: flex-end;
}
.logo{
	color: white;
	float: left;
}
ul{
	float: left;
	display: flex;
	justify-content: flex-end;
}
ul li{
	padding: 0 10px 0 10px;
}

2 odpowiedzi

odpowiedź 29 grudnia 2016 przez niezalogowany

Usuń z .logo i ul float: left;

w #top-flex zamień justify-content: flex-end na space-between

komentarz 29 grudnia 2016 przez Kuba Bielawski Obywatel (1,760 p.)

ale te menu chciałbym mieć do prawej :D coś w tym guście:

LOGO -----------------------------------------------------------menu--menu-menu-menu.....

1	komentarz 29 grudnia 2016 przez niezalogowany Usuń z .logo i ul float: left; w #top-flex zamień justify-content: flex-end na space-between

1	komentarz 29 grudnia 2016 przez Pietrak Pasjonat (18,850 p.) Potwierdzam. http://codepen.io/anon/pen/JbgOBL Ale czy trzeba usuwać float? I tak nie zostanie użyty ze względu na flexboxa, a będzie wsparciem dla prehistorycznych przeglądarek.

1	komentarz 29 grudnia 2016 przez Czort Nałogowiec (32,500 p.) Gdyby był poprawnie użyty to mógłby służyć jako fallback, ale tutaj z tego co zauważyłem nie za bardzo poprawnie jest:)

komentarz 29 grudnia 2016 przez niezalogowany

Ale czy trzeba usuwać float? I tak nie zostanie użyty ze względu na flexboxa, a będzie wsparciem dla prehistorycznych przeglądarek.

ie8-dilemma - imo tyle w temacie.

odpowiedź 29 grudnia 2016 przez Ivan Maniak (60,650 p.)

margin-left: auto dla elementu, który ma znaleźć się po prawej stronie (ul).
I usuń z #top-fex justify-contnet: flex-end lub ustaw to na wartość domyślną, flex-start

+ wypada nadać flex-direction: row dla #top-flex