Grid Test - Flexbox

Developer
Chris Sargent
Size
3,238 Kb
Views
12,144
  1. Grid Test - Flexbox Previews
  2. Grid Test - Flexbox HTML Codes
  3. Grid Test - Flexbox CSS Codes
  4. Grid Test - Flexbox JS Codes

How do I make an grid test - flexbox?

What is a grid test - flexbox? How do you make a grid test - flexbox? This script and codes were developed by Chris Sargent on 29 November 2022, Tuesday.

Grid Test - Flexbox Previews
IQ Test

Grid Test - Flexbox - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid Test - Flexbox</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cards__grid" ng-app="animation" ng-controller="animationCtrl"> <div class="card__container" id="card{{$index}}" ng-class="{'is-focused': card.isFocused, 'map-shown': card.map.isExpanded}" ng-repeat="card in cards" > <div class="card"> <div class="card__title"><span class="title-text">{{card.title}}</span></div> <div class="card__media" ng-if="card.isFocused"></div> <div class="card__text" ng-if="card.isFocused">Here is some text.</div> <div class="card__map" ng-class="{'is-expanded': card.map.isExpanded}" ng-if="card.isFocused"></div> <a ng-href="#card{{$index}}" ng-click="changeState($index)" ng-if="!card.isFocused">Details</a> <span ng-if="!card.isFocused">{{card.price}}</span> <a ng-click="close()" class="close" ng-if="card.isFocused">&times;</a> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Grid Test - Flexbox - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { width: 100%; height: 100%;
}
.cards__grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; background-color: #444; overflow: auto; margin: 0 auto; width: 100%; height: 100%; max-width: 760px; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch;
}
.card__container { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 50%; border: 1px solid darkgrey; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px;
}
.card { position: relative; width: 100%; height: 100%; -webkit-transition: all ease 500ms; transition: all ease 500ms; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;
}
.title-text { overflow: hidden; display: inline; text-overflow: ellipsis; white-space: nowrap; color: red;
}
.card__container:nth-of-type(odd) .card { background-color: lightgrey;
}
.card__container:nth-of-type(even) .card { background-color: pink;
}
.close { font-size: 30px; position: absolute; top: 5px; right: 5px; line-height: 0.4;
}

Grid Test - Flexbox - Script Codes JS Codes

var app = angular.module('animation', []);
app.controller('animationCtrl', function($scope, $location, $anchorScroll, $timeout) { $scope.cards = [{ isFocused: false, price: "$400", title: "Here, let's have a really very long title that we'd like to overflow with an ellipsis", mapisExpanded: false, }, { isFocused: false, price: "$500", mapisExpanded: false, }, { isFocused: false, price: "$300", mapisExpanded: false, }, { isFocused: false, price: "$200", mapisExpanded: false, }, { isFocused: false, price: "$100", mapisExpanded: false, }, { isFocused: false, price: "$600", mapisExpanded: false, }]; $scope.changeState = function(index) { var targetProp = $scope.cards[index]; $scope.close(); updateData(targetProp, "isFocused"); } $scope.close = function() { reset($scope.cards, false); } $scope.expandMe = function(index) { var targetProp = $scope.cards[index].map; updateData(targetProp, "isExpanded") } function updateData (property, val) { property[val] = !property[val]; } function reset(a, v) { var i, n = a.length; for (i = 0; i < n; ++i) { a[i].isFocused = v; } }
});
Grid Test - Flexbox - Script Codes
Grid Test - Flexbox - Script Codes
Home Page Home
Developer Chris Sargent
Username ChrisSargent
Uploaded November 29, 2022
Rating 3
Size 3,238 Kb
Views 12,144
Do you need developer help for Grid Test - Flexbox?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Sargent (ChrisSargent) Script Codes
Name
Cupboard Test
Flexbox Linebreaks V2
Checkbox Mobile Nav Toggle Test
Map Expand 1
Quick Angular
Material Card Expand Animation
IOS Pure CSS Slide Toggle Checkbox
Flexbox Linebreaks V1
Angular Fixed Position Test
A Pen by Chris Sargent
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!