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

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

 

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

 

Link to comment
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...
×
 Share
Go to topic listing
×
×
  • Create New...