diff --git a/08_flex/index.html b/08_flex/index.html new file mode 100644 index 0000000..06ae58e --- /dev/null +++ b/08_flex/index.html @@ -0,0 +1,27 @@ + + + + + + Document + + + + + +
+
Header
+
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus sit soluta molestias, ullam magni deserunt consequatur aliquam odit tempore beatae, neque dicta perspiciatis eaque. Itaque earum iste necessitatibus ullam. Ea.

+
+ + + +
+ + \ No newline at end of file diff --git a/08_flex/style.css b/08_flex/style.css new file mode 100644 index 0000000..2d95458 --- /dev/null +++ b/08_flex/style.css @@ -0,0 +1,59 @@ +.navigace { + display: flex; + flex-flow: row wrap; + justify-content: flex-end; + + list-style: none; + margin: 0; +} + +.navigace a { + text-decoration: none; + display: block; + padding: 10px; +} + +.navigace a:hover{ + background-color:lightgreen; + +} + +@media all and (max-width: 800px) { + .navigace { + justify-content: space-around; + } +} + +@media all and (max-width:600px) { + .navigace { + flex-flow: column wrap; + padding: 0; + } + .navigace a { + text-align: center; + padding: 10px; + } +} + + +.wrapper{ + display: flex; + flex-flow: row wrap; + text-align: center; +} +.wrapper > * { + padding: 10px; + flex: 1 100%; +} +@media all and (min-width: 600px){ + .aside { + flex: 1 0 0; + } +} +@media all and (min-width: 800px){ + .main {flex:3 0px;} + .aside-1 {order: 1;} + .main {order: 2;} + .aside-2 {order: 3;} + .footer {order: 4;} +} \ No newline at end of file