Jump to content
php.lv forumi

flexbox container specify move child

akonens

By akonens
in CSS

 Share

Recommended Posts

akonens Newbie

akonens

Posted
Posted

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 */

 

sss.jpg

akonens Newbie

akonens

Posted
  • Author
Posted
8 minutes ago, akonens said:

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)

Piemeram ja izmanošu margin vai pading tad viss tas logs bīdīsies prom no viņa.
Piemēram kad izmanto. justify-content: spece-between 
Un pašam bērnam varētu uzlikt justify-content: flex-end; Tad viņam vajadzētu nobīdites uz beigām bet viņs neko pakaļa nedara :confused: 


<!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 */

 

sss.jpg

 

jurgenzz Newbie

jurgenzz

Posted
Posted
17 hours ago, akonens said:

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 */

 

sss.jpg

 

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing
×
×
  • Create New...