Search completed in 0.95 seconds.
flex-direction - CSS: Cascading Style Sheets
the
flex-direction css property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).
... syntax /* the direction text is laid out in a line */
flex-direction: row; /* like <row>, but reversed */
flex-direction: row-reverse; /* the direction in which lines of text are stacked */
flex-direction: column; /* like <column>, but reversed */
flex-direction: column-reverse; /* global values */
flex-direction: inherit;
flex-direction: initial;
flex-direction: unset; values the following values are accepted: row the flex container's main-axis is defi...
... accessibility concerns using the
flex-direction property with values of row-reverse or column-reverse will create a disconnect between the visual presentation of content and dom order.
...class="box" style="background-color:yellow;">c</div> </div> <h4>this is a row-reverse</h4> <div id="content1"> <div class="box1" style="background-color:red;">a</div> <div class="box1" style="background-color:lightblue;">b</div> <div class="box1" style="background-color:yellow;">c</div> </div> css #content { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex;
flex-direction: column-reverse; } .box { width: 50px; height: 50px; } #content1 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex;
flex-direction: row-reverse; } .box1 { width: 50px; height: 50px; } result specifications specification status comment css flexible box layout modulethe definition of '
flex-direction' in that specification.
Basic concepts of flexbox - CSS: Cascading Style Sheets
the main axis is defined by the
flex-direction property, and the cross axis runs perpendicular to it.
... the main axis the main axis is defined by
flex-direction, which has four possible values: row row-reverse column column-reverse should you choose row or row-reverse, your main axis will run along the row in the inline direction.
... the cross axis the cross axis runs perpendicular to the main axis, therefore if your
flex-direction (main axis) is set to row or row-reverse the cross axis runs down the columns.
...And 10 more matches
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
the cross axis the align-items and align-self properties control alignment of our flex items on the cross axis, down the columns if
flex-direction is row and along the row if
flex-direction is column.
... changing the main axis so far we have looked at the behaviour when our
flex-direction is row, and while working in a language written top to bottom.
... if we change our
flex-direction to column, align-items and align-self will align the items to the left and right.
...And 8 more matches
Ordering Flex Items - CSS: Cascading Style Sheets
reverse the display of the items the
flex-direction property can take one of four values: row column row-reverse column-reverse the first two values keep the items in the same order that they appear in the document source order and display them sequentially from the start line.
...the specification continues with a warning not to use reordering to fix issues in your source: “authors must not use order or the *-reverse values of flex-flow/
flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.” note: for some years firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers.
...if you change the order using
flex-direction you can see how the tab order continues to follow the order that the items are listed in the source.
...And 4 more matches
Flexbox - Learn web development
flexbox provides a property called
flex-direction that specifies what direction the main axis runs in (what direction the flexbox children are laid out in) — by default this is set to row, which causes them to be laid out in a row in the direction your browser's default language works in (left to right, in the case of an english browser).
... try adding the following declaration to your <section> rule:
flex-direction: column; you'll see that this puts the items back in a column layout, much like they were before we added any css.
...first of all, try changing your
flex-direction property value to row-reverse — now you'll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.
...And 2 more matches
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
@media (min-width: 700px) { .wrapper { grid-template-columns: 1fr 4fr 1fr; grid-template-areas: "header header header" "nav content sidebar" "nav content ad" "footer footer footer" } nav ul {
flex-direction: column; } } the three-column layout has two 1fr unit side columns and a middle column that has 4fr as the track size.
... @media (min-width: 700px) { .main-nav { grid-column: col-start / span 2; grid-row: 2 / 4; } .content { grid-column: col-start 3 / span 8; grid-row: 2 / 4; } .side { grid-column: col-start 11 / span 2; grid-row: 2; } .ad { grid-column: col-start 11 / span 2; grid-row: 3; } .main-footer { grid-column: col-start / span 12; } nav ul {
flex-direction: column; } } once again the grid inspector is useful to help us see how our layout has taken shape.
...i set the list item to display: flex and the
flex-direction to column.
...And 2 more matches
Box alignment in Flexbox - CSS: Cascading Style Sheets
the axes and
flex-direction flexbox respects the writing mode of the document, therefore if you are working in english and set justify-content to flex-end this will align the items to the end of the flex container.
... if you are working with
flex-direction set to row, this alignment will be in the inline direction.
... however, in flexbox you can change the main axis by setting
flex-direction to column.
...therefore it is easiest to think about the main and cross axis when working in flexbox like so: the main axis = direction set by
flex-direction = alignment via justify-content the cross axis = runs across the main axis = alignment via align-content, align-self/align-items main axis alignment justify-content cross axis alignment align-self align-items align-content there is no justify-self in flexbox on the main axis, flexbox deals with our content as a group.
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } //using this mixin %flexbox { @include flexbox; } @mixin inline-flex { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } %inline-flex { @include inline-flex; } flexbox direction the
flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis.
... values: row (default) | row-reverse | column | column-reverse spec: https://drafts.csswg.org/css-flexbox/#
flex-direction-property @mixin
flex-direction($value: row) { @if $value == row-reverse { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-direction: reverse; -moz-box-orient: horizontal; } @else if $value == column { -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-box-direction: normal; -moz-box-orient: vertical; } @else if $value == column-reverse { -webkit-box-direction: reverse; -webkit-box-orient: vertical; -moz-box-direction: reverse; -moz-box-orient: vertical; } @else { -webkit-box-direction: normal; -webkit-box-ori...
...ent: horizontal; -moz-box-direction: normal; -moz-box-orient: horizontal; } -webkit-
flex-direction: $value; -ms-
flex-direction: $value;
flex-direction: $value; } // shorter version: @mixin flex-dir($args...) { @include
flex-direction($args...); } flexbox wrap the flex-wrap property controls whether the flex container is single-lined or multi-lined and the direction of the cross-axis, which determines the direction in which the new lines are stacked in.
... -webkit-flex-wrap: $value; @if $value == nowrap { -ms-flex-wrap: none; } @else { -ms-flex-wrap: $value; } flex-wrap: $value; } flexbox flow (shorthand) the flex-flow property is shorthand for setting the
flex-direction and flex-wrap properties, which together define the flex container's main and cross axes.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
94 cross axis css, glossary, cross axis, flexbox the cross axis in flexbox runs perpendicular to the main axis, therefore if your
flex-direction is either row or row-reverse then the cross axis runs down the columns.
... 260 main axis css, glossary, main axis, flexbox the main axis in flexbox is defined by the direction set by the
flex-direction property.
... there are four possible values for
flex-direction.
Main Axis - MDN Web Docs Glossary: Definitions of Web-related terms
the main axis in flexbox is defined by the direction set by the
flex-direction property.
... there are four possible values for
flex-direction.
... learn more property reference flex-basis
flex-direction flex-grow flex-shrink justify-content flex further reading css flexbox guide: basic concepts of flexbox css flexbox guide: aligning items in a flex container css flexbox guide: controlling ratios of flex items along the main axis ...
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
for example, if i have a 500 pixel-wide container,
flex-direction is row, and i have three flex items each 100 pixels wide, then i have 200 pixels of positive free space, which could be distributed between the items if i wanted them to fill the container.
... in the following examples i am working with
flex-direction set to row, therefore the size of items will always come from their width.
...you could equally try out each example with
flex-direction: column.
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
there is however the ability to wrap flex items onto new lines, creating new rows if
flex-direction is row and new columns if
flex-direction is column.
... wrapping and
flex-direction wrapping works as you might expect when combined with
flex-direction.
... if
flex-direction is set to row-reverse then the items will start from the end edge of the container and lay themselves out in reverse ordered lines.
flex-flow - CSS: Cascading Style Sheets
constituent properties this property is a shorthand for the following css properties:
flex-direction flex-wrap syntax /* flex-flow: <'
flex-direction'> */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* flex-flow: <'flex-wrap'> */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* flex-flow: <'
flex-direction'> and <'flex-wrap'> */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; /* global values */ ...
...flex-flow: inherit; flex-flow: initial; flex-flow: unset; values see
flex-direction and flex-wrap for details on the values.
... formal definition initial valueas each of the properties of the shorthand:
flex-direction: rowflex-wrap: nowrapapplies toflex containersinheritednocomputed valueas each of the properties of the shorthand:
flex-direction: as specifiedflex-wrap: as specifiedanimation typediscrete formal syntax <'
flex-direction'> | <'flex-wrap'> examples setting column-reverse and wrap element { /* main-axis is the block direction with reversed main-start and main-end.
Cross Axis - MDN Web Docs Glossary: Definitions of Web-related terms
the cross axis in flexbox runs perpendicular to the main axis, therefore if your
flex-direction is either row or row-reverse then the cross axis runs down the columns.
... learn more property reference align-content align-items align-self flex-wrap
flex-direction flex further reading css flexbox guide: basic concepts of flexbox css flexbox guide: aligning items in a flex container css flexbox guide: mastering wrapping of flex items ...
CSS Box Alignment - CSS: Cascading Style Sheets
when aligning items on the inline axis you will use the properties which begin with justify-: justify-items justify-self justify-content when aligning items on the block axis you will use the properties that begin align-: align-items align-self align-content flexbox adds an additional complication in that the above is true when
flex-direction is set to row.
...working in a horizontal top to bottom writing mode such as english, with
flex-direction as row the items start on the far left and any available space after displaying the items is placed after the items.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
we make the card a flex container, with
flex-direction: column.
... .media .content { flex: 3; padding: 10px; } .image { flex: 1; } flipping the media object to switch the display of the media object so that the image is on the right and the content is on the left we can use the
flex-direction property set to row-reverse.
WebKit CSS extensions - CSS: Cascading Style Sheets
p-right-radius -webkit-box-decoration-break -webkit-box-shadow -webkit-box-sizing c -webkit-clip-path -webkit-column-count -webkit-column-fill -webkit-column-gap -webkit-column-rule -webkit-column-rule-color -webkit-column-rule-style -webkit-column-rule-width -webkit-column-span -webkit-column-width -webkit-columns f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-
flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap -webkit-font-feature-settings -webkit-font-kerning -webkit-font-variant-ligatures g-j -webkit-grid -webkit-grid-area -webkit-grid-auto-columns -webkit-grid-auto-flow -webkit-grid-auto-rows -webkit-grid-column -webkit-grid-column-end -webkit-grid-column-gap -webkit-grid-column-start -webkit-grid-gap -we...
...tom-left-radius -webkit-border-bottom-right-radius -webkit-border-image -webkit-border-radius -webkit-box-align**, *** -webkit-box-direction**, *** -webkit-box-flex**, *** -webkit-box-orient**, *** -webkit-box-pack**, *** -webkit-box-shadow -webkit-box-sizing -webkit-border-top-left-radius -webkit-border-top-right-radius f -webkit-filter -webkit-flex -webkit-flex-basis -webkit-
flex-direction -webkit-flex-flow -webkit-flex-grow -webkit-flex-shrink -webkit-flex-wrap j -webkit-justify-content m -webkit-mask -webkit-mask-clip -webkit-mask-composite* -webkit-mask-image -webkit-mask-origin -webkit-mask-position -webkit-mask-position-x** -webkit-mask-position-y** -webkit-mask-repeat -webkit-mask-size o-p -webkit-order -webkit-perspective -webkit-perspective-ori...
box-direction - CSS: Cascading Style Sheets
the -moz-box-direction will only be used for xul while the previous standard box-direction has been replaced by
flex-direction.
... see also box-orient box-pack box-align
flex-direction ...
flex-wrap - CSS: Cascading Style Sheets
the cross-start is either equivalent to start or before depending on the
flex-direction value.
...the cross-start is either equivalent to start or before depending
flex-direction value and the cross-end is the opposite of the specified cross-start.
CSS3 - Archive of obsolete content
css flexible box layout module candidate recommendation add a flexbox layout to the css display property and several new css properties to control it: flex, flex-align,
flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, and flex-wrap.
Flex - MDN Web Docs Glossary: Definitions of Web-related terms
learn more property reference align-content align-items align-self flex flex-basis
flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide: relationship of flexbox to other layout methods css flexbox guide: aligning items in a flex container css flexbox guide: ordering flex items css flexbox guide: controlling ratios of fle...
Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
learn more property reference align-content align-items align-self flex flex-basis
flex-direction flex-flow flex-grow flex-shrink flex-wrap justify-content order further reading css flexible box layout module level 1 specification css flexbox guide: basic concepts of flexbox css flexbox guide: relationship of flexbox to other layout methods css flexbox guide: aligning items in a flex container css flexbox guide: ordering flex items css flexbox guide: controlling ratios of fle...
MDN Web Docs Glossary: Definitions of Web-related terms
orms xhr (xmlhttprequest) xhtml xinclude xlink xml xpath xquery xslt other 404 502 alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution
flex-direction glsl interface library memory management routers self-executing anonymous function stylesheet vector image ...
Beginning our React todo list - Learn web development
__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex;
flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-heig...
Starting our Svelte Todo list app - Learn web development
__lg:focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex;
flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-heig...
Vue conditional rendering: editing existing todos - Learn web development
; } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } form { display: flex;
flex-direction: row; flex-wrap: wrap; } form > * { flex: 0 0 100%; } </style> note: walk through the above code then read the below description to make sure you understand everything the component is doing before moving on.
HTMLDetailsElement: toggle event - Web APIs
</details> </section> css body { display: flex;
flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', logitem); }); result specifications...
orientation - CSS: Cascading Style Sheets
examples html <div>box 1</div> <div>box 2</div> <div>box 3</div> css body { display: flex; } div { background: yellow; } @media (orientation: landscape) { body {
flex-direction: row; } } @media (orientation: portrait) { body {
flex-direction: column; } } result specifications specification status comment media queries level 4the definition of 'orientation' in that specification.
CSS Flexible Box Layout - CSS: Cascading Style Sheets
reference css properties flex flex-basis
flex-direction flex-flow flex-grow flex-shrink flex-wrap order alignment properties the properties align-content, align-self, align-items and justify-content initially appeared in the flexbox specification, but are now defined in box alignment.
Column layouts - CSS: Cascading Style Sheets
a single row of items with equal heights — flexbox flexbox can be used to break content into columns by setting
flex-direction to row, however flexbox targets the elements inside the flex container and will place each direct child into a new column.
CSS reference - CSS: Cascading Style Sheets
nt>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basis
flex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focusfont@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-...
animation - CSS: Cascading Style Sheets
1%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto;
flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto;
flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; fl...
clip-path - CSS: Cascading Style Sheets
<text x="96" y="91">i love</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; background: #eee; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto;
flex-direction: row; flex-wrap: wrap; } .col { flex: 1 auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; flex: 1; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { display: inline-block; ...
flex - CSS: Cascading Style Sheets
| <'flex-basis'> ] examples setting flex: auto html <div id="flex-container"> <div class="flex-item" id="flex">flex box (click to toggle raw box)</div> <div class="raw-item" id="raw">raw box</div> </div> css #flex-container { display: flex;
flex-direction: row; } #flex-container > .flex-item { flex: auto; } #flex-container > .raw-item { width: 5rem; } var flex = document.getelementbyid("flex"); var raw = document.getelementbyid("raw"); flex.addeventlistener("click", function() { raw.style.display = raw.style.display == "none" ?
font-style - CSS: Cascading Style Sheets
ont-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex;
flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantinput = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantinput.value}deg`; slantlabel...
font-weight - CSS: Cascading Style Sheets
ademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex;
flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function update() { weightlabel.textcontent = `font-weight: ${weightinput.
mix-blend-mode - CSS: Cascading Style Sheets
x="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> </div> </div> html,body { height: 100%; box-sizing: border-box; background: #eee; } .grid { width: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto;
flex-direction: row; flex-wrap: wrap; height: auto; } .col { display: flex; flex: 1 auto;
flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overflow: hidden; text-align: center; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cel...
object-fit - CSS: Cascading Style Sheets
g" alt="mdn logo"> <h2>object-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font-size: 1em; margin: 1em 0 0.3em; } div { display: flex;
flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 940px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result spec...
The building blocks of responsive design - Progressive web apps (PWAs)
to fix this, we added in a media query that only applies its contents to the markup when device is viewed in landscape orientation: @media all and (max-width: 480px) and (orientation: landscape) { nav { width: auto; -webkit-
flex-direction: column; -moz-
flex-direction: column; -ms-
flex-direction: column;
flex-direction: column; } nav button { font-size: 6.8vh; } nav button { border-left: 0; } x-card:nth-child(1) video, x-card:nth-child(2) img, x-card:nth-child(3) { margin-top: 0; } x-card:nth-child(1) button, x-card:nth-child(2) button { font-size: 2rem; } } this does the follo...