Jump to content
php.lv forumi

flexbox container specify move child


Recommended Posts

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

Link to post
Share on other sites
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

 

Link to post
Share on other sites
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

 

Link to post
Share on other sites

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...
×
×
  • Create New...