Search the Community
Showing results for tags 'flexbox'.
Found 1 result
-
Sveiki - ceru ar atbalstu. Izveidoju navigāciju - responsīvu un esmu sapratis ka flex var bīdīt dažādās virzienos containerus. Man ir <nav> ar vairākiem <ul> kur iekšā protams iedaāš <li> lists. Pašu containeri stilou ar justify-content:space-between; un <nav> <ul> ar display:flex. Flex smuki sakārto katru <ul> noteiktās vietās. Bet kā kā es var specifiski norādīt lai tas <ul> nobīdās pa labi vai pa kreisi? (specifiski vienu) <!DOCTYPE html> <html lang="en"> <head> <title>Test.Flexbox</title> <link rel="stylesheet" type="text/css" href="css/photos.css"> </head> <body> <div class="wrapper"> <nav> <ul class="nav-logo"> <li><img src="./img/coollogo_com-616278.gif" alt="" /></li> </ul> <ul class="navigation"> <li><a href="index.html">Sākums</a></li> <li><a href="">Fotosesijas</a></li> <li><a href="">Portfolio</a></li> <li><a href="">Vīzīja</a></li> <li><a href="">Video</a></li> </ul> <ul class="social"> <li><a href="" class="fb">Facebook</a></li> <li><a href="" class="tw">Twitter</a></li> </ul> <ul class="categories"> <li><a href="">Kategorijas</a></li> <li><a href="">Kontakti</a></li> </ul> </nav> </div> </body> </html> *{ font-family: verdana; margin: 0; } body{ background: #eee; color: #333; margin: 0; } .wrapper{ width: 100%; margin: 0 auto; flex-flow: row wrap; } /* menu base styles */ nav ul li img { height: 37px; } nav{ background: #333; justify-content:space-between; } nav ul{ list-style-type: none; padding: 0; } nav a{ text-decoration: none; text-align: center; color: #fff; display: block; padding: 10px; } nav a:hover{ background-color: #555; } /* social menu base styles */ a.tw{ background: url(../img/tw.png) no-repeat center; background-size: 80%; } a.fb{ background: url(../img/fb.png) no-repeat center; background-size: 80%; } .social a{ text-indent: -10000px; margin: 0 auto; } .social{ max-width: 80px; margin: 0 auto; /* do at end */ } /* grid vs flex base styles */ /* flex styles */ nav ul.social li{ flex: 1 1 0; } nav ul.social{ flex: 1 1 0; display: flex; } .navigation { } .social { } .categories { } .nav-logo { padding-left: 90px; } @media screen and (min-width: 768px){ nav ul{ display: flex; } nav li{ flex: 1 1 0; } nav{ display: flex; } ul.social{ margin: 0; } } /* end media 768 */
