Jump to content
php.lv forumi
Sign in to follow this  
akonens

flexbox container specify move child

Recommended Posts

akonens    0

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

Share this post


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

 

Share this post


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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×